javascript - Chartsjs.org和Ember Js

我想在屏幕上使用Ember js渲染此linechart
折线图需要为每个数据点使用标签数组。这在X轴上显示。

我的控制器

lineChartData = {
    labels : ["09:00am","09:15am","09:30am","09:45am","10:00am","10:15am","10:30am"],
    datasets : [
      {fillColor: "rgba(151,187,205,0.5)",strokeColor : "rgba(151,187,205,1)",pointColor : "rgba(151,187,205,1)",pointStrokeColor : "#fff",data : [0.025,0.050,0.075,0.025,0.050,0.1,0.0]}
    ]
}

车把

{{view Portal.LineView datasetsBinding="lineChartData"}}

视图

Portal.LineView = Ember.View.extend
  classNames: ['canvas']

  didInsertElement: ->
    @renderChart()

  renderChart: ->
    view = @
    canvas = view.$()
    if (canvas)
      Chart(canvas.getContext("2d")).Line(lineChartData)

我收到此错误

Uncaught TypeError: Object [object Object] has no method 'getContext'

最佳答案

为了使图表起作用，该元素需要是画布。我认为您尝试这样做，但实际上您正在使用类canvas创建一个div

<div class='canvas'></div>

您将要使用tagName

Portal.LineView = Ember.View.extend
  tagName: 'canvas'

  didInsertElement: ->
    @renderChart()

  renderChart: ->
    view = @
    canvas = view.$()
    if (canvas)
      Chart(canvas.getContext("2d")).Line(lineChartData)

另外，我将假设lineChartData是某个地方的全局变量。