Question

我目前正在与Meteor合作开展一个项目。它用于创建，编辑，删除和投票。现在，我想要一个页面，您可以在其中查看＆＃34; ChartJS＆＃34;所显示答案的结果。

我得到以下代码：模板：

<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});
    }
});

首先我遇到了图表没有显示的问题，我通过这样做来修复它（仅针对一个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);
}

现在我需要动态的drawChart。

伪代码：

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函数中获取当前元素的questionId（＆＃34; {{_ id}}＆＃34;在analyzeChart模板中）？

问候＆amp;快乐的编程 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实现更新逻辑（跟踪器是Meteor的前端的一部分，ReactiveArray类似于带有fetch的Minimongo）：https://github.com/Slava/jsconf-asia-demo/blob/master/tracker.html#L47-L61

要使其适应Meteor应用，您可以在模板的rendered回调中启动自动运行，并依赖于您获取并提供给Chart.js的minimongo查询。完成后，告诉Chart.js自行更新。

Meteor和ChartJS动态创建图表

2 个答案: