[英]Chart.js canvas, how can I swap data without the previous data affecting my hover events?
使用chart.js我已經構建了一些條形圖。 我交換數據以顯示點擊的不同圖表。 加載頁面顯示一切正常。
<div id="chart-container">
<button class="dataSelector" onclick="dataSwap('webDevData')">WebDev Tools</button>
<button class="dataSelector" onclick="dataSwap('graphicsData')">Graphic Design Tools</button>
<div class="chart-window">
<canvas id="myChart"></canvas>
</div>
</div>
加載頁面后,將初始化圖表並創建並正確呈現圖表對象。 在調用我的swapData函數時,其他數據集被正確呈現,但此后舊數據集仍然響應將鼠標懸停在圖表上。
我的功能看起來像這樣。
<script type="text/javascript">
//set both sets of data in variables
var lablesWebDev = ["CSS", "JAVASCRIPT", "PYTHON", "PHP", "RUBY", "SQL", "PERL"];
var dataWebDev = [3.5, 3.5, 1, 1.5, 0.5, 1, 0.5];
var lablesGraphic = ["Photoshop", "Illustrator", "GIMP", "BLENDER", "FreeCAD", "Photography"];
var dataGraphic = [1.5, 1.1, 2.5, 2.0, 0.8, 3.0];
function dataSwap(dataType){
//check argument for which data set to render
if (dataType == "webDev"){
var labelsChosen = lablesWebDev;
var dataChosen = dataWebDev;
}else if (dataType == "graphic"){
var labelsChosen = lablesGraphic;
var dataChosen = dataGraphic;
}
//grab the canvas and initialize the chart following documentation.
Chart.defaults.global.defaultFontColor = 'black';
var ctx = document.getElementById("myChart");
var myChart = new Chart(ctx, {
type: 'bar',
data: { //variables placed below
labels: labelsChosen,
datasets: [{
label: 'Years Experience',
data: dataChosen,
backgroundColor: 'rgba(255, 50, 80, 0.5)',
borderColor: 'rgba(255, 50, 80, 1)',
borderWidth: 1
}]
},
options: {
scales: {
yAxes: [{
ticks: {
beginAtZero:true
}
}]
}
}
});
}dataSwap("webDev");
</script>
如何重新初始化此圖表對象以使先前的數據集不再存在? 或者至少如何禁用懸停事件以便我完全繞過這個問題?
謝謝你的智慧!
可以通過.clear()方法清除圖表。 這將清除現有圖表。 還有一個選項.destroy()來銷毀圖表。
//This would destroy the chart.
var mychart = new Chart(xyaz, myNinjaConfig);
mychart.destroy();
//This would clear. the chart.
const mychart = new Chart (xyaz, myNinjaConfig);
mychart.clear();
您可以將選項更改為僅偵聽click事件:
options: {
events: ['click'],
scales: {
yAxes: [{
ticks: {
beginAtZero:true
}
}]
},
}
這只會在您單擊時更改顯示。
我無法通過將myChart聲明為var或const來訪問任何方法。 最后我發現通過聲明
this.myChartInstance = new Chart(ctx, { ... //WORKS!!
var myChartInstance = new Chart(ctx, { ... //doesnt work
const myChartInstance = new Chart(ctx, { ... //doesnt work
我現在可以從控制台調用destroy方法。
在重新初始化我的數據之前添加條件檢查,效果很好!! 我可以將鼠標懸停在圖表上並交換數據而不會產生任何沖突。 解:
if (this.myChartInstance) {
this.myChartInstance.destroy();
}
this.myChartInstance = new Chart(ctx, { ...
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.