javascript - Chart.js 画布,如何在不影响悬停事件的情况下交换数据?
问题描述
使用 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();
推荐阅读
- bash - /usr/bin/bash: -c: line 20: 在使用 make 命令安装 sphinxbase 时出现意外标记 `(' 附近的语法错误
- python - 从列表中删除重复的字典并减去重复元素的键值
- xamarin.ios - 如何避免在滚动到滚动视图中的特定点时使用 Task.Delay,因为我在运行时添加了看不见的子项?
- java - 音频在 android studio (MediaPlayer) 中不起作用
- zend-framework - 如何在学说zend中没有实体的情况下离开查询构建器
- botframework - IntentDialog不在BotFramework SDK4中,所以当NLP是Google dialogflow时如何识别意图
- firebase - 使 Firebase 实时数据库仅返回允许的字段
- azure-devops - 无法在 Azure Devops 中仅构建解决方案的一个项目
- r - 在使用 Have::read_sas 读取数据后使用 dplyr 中的 pull() 保留属性。如何避免?
- python - 如何使用 python 将字典和列表写入 csv 或 .xlsx