流星和ChartJS动态创建图表

Question

我目前正在与Meteor合作一个项目。 它用于创建，编辑，删除和投票。 现在，我想拥有一个页面，您可以在其中看到“ ChartJS”显示的答案的结果。

我得到以下代码：模板：

<template name="pollAnalysis">
    <h3>Auswertung {{title}}</h3>

    {{#each questions}}
        {{> questionAnalysis}}
    {{/each}}
</template>

<template name="questionAnalysis">
    <div class="post">
        <div class="post-content">
            <h3>{{question}}</h3>
            {{> analysisChart}}
        </div>
    </div>
</template>

<template name="analysisChart">
    <canvas id="{{_id}}" class="mychart" height="400" width="400"></canvas>
</template>

助手：

Template.pollAnalysis.helpers({
    questions: function(){
        return Questions.find({pollId: this._id});
    }
});

首先，我遇到了chartjs无法显示的问题，我通过执行此操作将其修复（仅针对单个ID，多数民众赞成在其中卡住）

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

function drawChart(){

  var data = [
    {
        value: 10,
        color:"#27AE60",
        highlight: "#2ECC71",
        label: "trifft zu"
    },
    {
        value: 10,
        color: "#16A085",
        highlight: "#1ABC9C",
        label: "trifft eher zu"
    }
]

  var ctx = $("#Cb8CdtDpdKA9y4Hij").get(0).getContext("2d");
  var myNewChart = new Chart(ctx);

  new Chart(ctx).Pie(data);
}

现在，我需要动态绘制图表。

伪代码：

function drawChart(questionId){

  var data = [
    {
        value: Questions_Users.find({questionId: questionId}, answer: "yes").count(),
        color:"#27AE60",
        highlight: "#2ECC71",
        label: "trifft zu"
    },
    {
        value: Questions_Users.find({questionId: questionId}, answer: "no").count(),
        color: "#16A085",
        highlight: "#1ABC9C",
        label: "trifft eher zu"
    }
]

  var ctx = $("#"+questionId).get(0).getContext("2d");
  var myNewChart = new Chart(ctx);

  new Chart(ctx).Pie(data);
}

因此，我必须将Template.analysisChart.rendered中的questionId交给drawChart（）函数。 但是，如何在Template.analysisChart.rendered函数中获取当前元素的问题ID（在analysisChart模板中为“ {{_id}}”）？

问候和快乐编程faebuk

Answer 1

一个快速的答案是使用类似

Template.analysisChart.rendered = function(){
  Tracker.autorun(function(){
   var data = Questions_Users.find();
   drawChart();
  })
}

或研究observeChanges，例如：

Template.analysisChart.rendered = function(){
  Questions_Users.find().observeChanges({
   added:function(id, fields){
    //update Chart.datasets
    Chart.update()
   }
  })
}

Answer 2

我有一个示例项目，该项目仅使用Tracker和ReactiveArray实现了更新逻辑（tracker是Meteor前端的一部分，ReactiveArray与具有获取功能的Minimongo相似）： https : //github.com/Slava/jsconf-asia-demo /blob/master/tracker.html#L47-L61

为了使它适应Meteor应用程序，您将在模板的rendered回调中启动自动运行，并依赖于您获取并提供给Chart.js的minimongo查询。 完成后，告诉Chart.js进行自我更新。