在流星中使用chart.js的反应图表

Question

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

    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模板中的计数,并且只要计数发生变化就可以正常工作但是图表不会改变,直到我重新加载页面.我希望图表能够对集合中的变化做出反应.

Answer 1

您可以使用Tracker.autorun在drawChart其依赖于更改的响应数据源时重新运行:

if (Meteor.isClient) {

    function drawChart() {
      ...
    }

    Tracker.autorun(drawChart());
}