javascript - 将鼠标悬停在 Meteor onRendered 函数中的 chart.js 值上会导致图表轴偏移

Question

我在 self.autorun 函数中有一个 chart.js 条形图，它响应下拉选择器。当我从下拉列表中选择一个新实体，然后将鼠标悬停在条形图中的值上时，y 轴会像这样跳转:

下拉代码:

Template.Dropdown.events({
    "change #category-select": function (event) {
        var category = event.currentTarget.value;
        Session.set("chosenDairy", category)
       }
});

条形码:

    Template.Bothdaily.onRendered(function () {
    Tracker.autorun(function(){
    //look up mongodb values
    //do some calculations

    //Begin Chart.js bargraph   
    var options = {
        //bargraph options
    };

    var data = {
        //bargraph data
    };

    var ctxtwo = document.getElementById("myBothDaily").getContext("2d");
    var myBarBothDaily = new Chart(ctxtwo).Bar(data, options);

    })//autorun

}); //onRendered

html代码:

<template name="Bothdaily">
  <canvas id="myBothDaily" width="300" height="300"></canvas>
</template>

我怀疑这是因为两个值都出现在条形图中。我认为这可能会通过 Tracker.afterflush() 函数解决，但运气不好。

你能建议我如何在将鼠标悬停在我的响应式(Reactive) chart.js 条形图上时消除 y 轴偏移吗？

Answer 1

似乎是图表的一个悬而未决的问题，它正在带回旧图表的数据。

使 myBarBothDaily 变量成为全局变量，并将其与模板的上下文绑定(bind)，并在 Tracker.autorun() block 之前将其初始化为 null

this.myBarBothDaily = null

现在在 autorun block 中，在实例化图表之前，通过调用 chart.js 的 destroy() 函数销毁先前图表的数据。

if(this.myBarBothDaily) {
   this.myBarBothDaily.destroy();
}
this.myBarBothDaily = new Chart(ctxtwo).Bar(data, options);

这应该可以解决您的问题。