3

meteor プロジェクトでは、次のようにデモ コードを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 に答える