3

在一个流星项目中，我已将chart.js中的演示代码复制到我的客户端文件夹中，如下所示：

function drawChart(){
  var data = {
  labels : ["January","February","March","April","May","June","July"],
  datasets : [
    {
        fillColor : "rgba(220,220,220,0.5)",
        strokeColor : "rgba(220,220,220,1)",
        pointColor : "rgba(220,220,220,1)",
        pointStrokeColor : "#fff",
        data : [65,59,90,81,56,55,40]
    },
    {
        fillColor : "rgba(151,187,205,0.5)",
        strokeColor : "rgba(151,187,205,1)",
        pointColor : "rgba(151,187,205,1)",
        pointStrokeColor : "#fff",
        data : [28,48,40,19,96,27,100]
    }
    ]
  }

  //Get context with jQuery - using jQuery's .get() method.
  var ctx = $("#myChart").get(0).getContext("2d");
  //This will get the first returned node in the jQuery collection.
  var myNewChart = new Chart(ctx);

  new Chart(ctx).Line(data);
}

Meteor.startup(function() {

  drawChart();

});

在 HTML 中，我有：

<canvas id="myChart" width="400" height="400"></canvas>

没有绘制任何内容，也没有抛出任何错误。在控制台中运行的相同代码会生成一个图表。我错过了什么？

我正在使用meteor-chartjs库。

4

2 回答 2

3

将画布添加到模板

<template name="chart">
<canvas id="myChart" width="400" height="400"></canvas>
</template>

使用模板呈现的回调调用您的 drawChart 函数

Template.chart.rendered = function(){
  drawChart();
}
于 2013-10-06T15:09:09.520 回答
0 
function drawChart(){
  var data = {
  labels : ["January","February","March","April","May","June","July"],
  datasets : [
    {
        fillColor : "rgba(220,220,220,0.5)",
        strokeColor : "rgba(220,220,220,1)",
        pointColor : "rgba(220,220,220,1)",
        pointStrokeColor : "#fff",
        data : [65,59,90,81,56,55,40]
    },
    {
        fillColor : "rgba(151,187,205,0.5)",
        strokeColor : "rgba(151,187,205,1)",
        pointColor : "rgba(151,187,205,1)",
        pointStrokeColor : "#fff",
        data : [28,48,40,19,96,27,100]
    }
    ]
  }

  //Get context with jQuery - using jQuery's .get() method.
  //var ctx = $("#myChart").get(0).getContext("2d");
  //This will get the first returned node in the jQuery collection.
  //var myNewChart = new Chart(ctx);

  //new Chart(ctx).Line(data);
  //modify this
  var ctx = document.getElementById("myChart").getContext("2d");
  var myNewChart = new Chart(ctx).PolarArea(data); 
}

Meteor.startup(function() {

  drawChart();

});
于 2013-10-06T14:14:57.610 回答