javascript - meteor 中带有 chart.js 的 react 图表

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 模板中显示计数，只要计数发生变化，它就可以正常工作，但图表不会发生变化，直到我重新加载页面。我希望图表对集合中的变化使用react。

Answer 1

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

if (Meteor.isClient) {

    function drawChart() {
      ...
    }

    Tracker.autorun(drawChart());
}