chart.js之流星不拉絲

在流星的項目，我已經複製從chart.js演示代碼到我的客戶端文件夾，如下所示：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庫。

來源

2013-10-06 Chris Wheadon

畫布添加到模板

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

使用模板呈現回調打電話給你drawChart功能

Template.chart.rendered = function(){ 
    drawChart(); 
}

來源

2013-10-06 15:09:09 landland

輝煌 - 謝謝！ –

有人可以解釋爲什麼我們需要這樣做？ @landland –

您需要將畫布放入模板以便渲染畫布。然後，您需要告訴模板調用drawChart函數以實際將圖表繪製到畫布中，然後在模板的呈現回調中執行此操作（呈現到DOM中，以便畫布現在可在模板中使用）。 – landland

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-06 14:14:57 sunysen

似乎仍然沒有... –

chart.js之流星不拉絲

回答

相關問題