javascript - meteor 和ChartJS动态创建图表

我目前正在与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}}”）？

问候和快乐编程
法布克

最佳答案

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

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

关于javascript - meteor 和ChartJS动态创建图表，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/27425544/