在Meteor中使用Chart.js创建响应式图表

Question

我正在使用chart.js在Meteor应用程序中生成图表。 这是我的代码：

    function drawChart(){        
        var data = [
            {
                value: Policies.find({'purchased_cover.trip_type': 'Single Trip'}).count(),
                color:"#F38630"
            },
            {
                value :Policies.find({'purchased_cover.trip_type': 'Annual Multi-Trip'}).count(),
                color : "#E0E4CC"
            },
            {
                value : Policies.find({'purchased_cover.trip_type': 'Backpacker'}).count(),
                color : "#69D2E7"
            },          
            {
                value :Policies.find({'purchased_cover.trip_type': 'Golf Annual'}).count(),
                color : "green"
            },
            {
                value :Policies.find({'purchased_cover.trip_type': 'Golf'}).count(),
                color : "red"
            },
            {
                value :Policies.find({'purchased_cover.trip_type': 'Winter Sports Annual'}).count(),
                color : "yellow"
            }           
        ]
          var ctx = $("#pieChart").get(0).getContext("2d");
          var myPieChart = new Chart(ctx);
          new Chart(ctx).Pie(data);
}
    Template.charts.rendered = function(){
      drawChart();

    };

我有几个帮助程序用于在HTML模板中显示计数，并且每当计数发生变化时它们都能正常工作，但是图表直到我重新加载页面才会更改。我希望图表能够对集合中的更改做出反应。

- Rajanand02

---

在 HTML 中，我只是使用 '<canvas id="pieChart" width="400" height="400"></canvas>' 来渲染图表。 - Rajanand02

请问您在Meteor应用程序中如何包含chartjs.js文件？谢谢。 - Mustafa

Answer 1

你可以使用Tracker.autorun，当依赖的反应性数据源发生变化时，重新运行drawChart：

if (Meteor.isClient) {

    function drawChart() {
      ...
    }

    Tracker.autorun(drawChart());
}

- Tobias

---

Template.charts.rendered = function() { Deps.autorun(function() { drawChart(); }); }; 对我很有效。 - Rajanand02

截至2014年7月26日，您只需调用myPieChart.update()即可。文档在此：http://www.chartjs.org/docs/#doughnut-pie-chart-prototype-methods - Archonic