將鼠標懸停在Meteor onRendered函數中的chart.js值上導致圖表軸偏移

我在self.autorun函數內有一個chart.js條形圖，該函數響應地向下拉選擇器作出響應。當我從下拉菜單中選擇一個新的實體，然後懸停在條形圖中的值y軸跳躍像這樣：將鼠標懸停在Meteor onRendered函數中的chart.js值上導致圖表軸偏移

下拉代碼：

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（）函數修復，但沒有運氣。

你能否建議我在移動我的活動chart.js條形圖時如何移除y軸偏移？

來源

2016-01-30 user3424230

緊張的圖表軸可能是一個問題與chart.js由評論在這裏判斷：https://forums.meteor.com/t/collection-not-available-onrendered-when-using-flow-router-solved/ 8105/6「圖表仍然對鼠標懸停，並顯示不正確的數據，但不像我的代碼那樣精神分裂症」 – user3424230

看起來像一個圖表懸停的問題，它將帶回舊圖表的數據。

使myBarBothDaily可變全球，並與模板的背景結合它和Tracker.autorun()塊之前，空初始化它

this.myBarBothDaily = null

現在

自動運行塊內，實例化您的圖表前，通過調用破壞之前的圖表數據destroy() chart.js的功能。

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

這應該解決您的問題。

來源

2017-08-30 08:34:38

將鼠標懸停在Meteor onRendered函數中的chart.js值上導致圖表軸偏移

回答

相關問題