Question

我想在屏幕上使用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'

Answer 1

为了使图表起作用，元素必须是画布。我认为你试图这样做，但实际上你正在用类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是某个地方的全局变量。

Chartsjs.org和Ember Js

1 个答案: