我显示带有chart.js的图表,当用户将鼠标悬停在其上时,将显示工具提示。效果很好。
但是,我想添加用户可以取消选中数据点的选项。我确实做到了,而且这样做是正确的,但是工具提示功能会记住新数据和旧数据。因此,如果将鼠标悬停在图表上,它将在新旧之间闪烁。
当我进行自定义工具提示并放置console.log的数据对象时,我可以看到它只是在其中加载了几个数据对象。
是否有办法确保真正遗忘了旧数据?
查看小提琴https://jsfiddle.net/CorneelDragon/s0udzwv3/27/或查看下面的代码(它在一开始就起作用,但是当您取消选中这些内容时,工具提示会使其变得不稳定):
<script
src='https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.3/Chart.min.js'></script>`
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>`
<div id="slct2">"beh"</div>
<table id="table1" border=1></table>
<!-- bar chart canvas element -->
<canvas id="myChart" width="200" height="50"></canvas>
<script type="text/javascript">
</script>
和javascript:
test_labels = ["meh", "beh", "yeh"]
score = [4,3.8,5]
var s2 = document.getElementById("slct2");
s2.innerHTML = "";
for (var test in test_labels) {
if (test_labels.hasOwnProperty(test)) {
var pair = test_labels[test] + score[test];
var checkbox = document.createElement("input");
checkbox.type = "checkbox";
checkbox.name = "test_filter";
checkbox.value = pair;
checkbox.checked = true;
s2.appendChild(checkbox);
var label = document.createElement('label');
label.htmlFor = pair;
label.appendChild(document.createTextNode(pair));
s2.appendChild(label);
s2.appendChild(document.createElement("br"));
}
}
function fillCanvas (test_labels, score) {
var ctx = document.getElementById("myChart").getContext('2d');
ctx.innerHTML = "";
var myChart = new Chart(ctx, {
type: 'bar',
data: {
labels : ["test_month"]
},
});
setTimeout(function () {
for (test in test_labels){
myChart.data.datasets.push({
backgroundColor: 'rgb(228,26,28)',
label: test_labels[test],
data: [score[test]]
});
}
myChart.update();
}, 1000);
}
fillCanvas(test_labels, score);
var filter_magic = function(e) {
test_selected = []
var table1 = document.getElementById("table1");
table1.innerHTML = "";
jQuery('input[type="checkbox"][name="test_filter"]').each(function() {
if (jQuery(this).is(':checked')) {
var tr = document.createElement('tr');
tr.innerHTML = this.value;
table1.appendChild(tr);
test_selected.push(this.value);
}
})
fillCanvas(test_selected, score);
}
jQuery('input[type="checkbox"][name="test_filter"]').on('change', filter_magic);
filter_magic();
答案 0 :(得分:1)
这不是更新图表的正确方法,每次更新图表时,代码中都会在不破坏先前实例的情况下创建图表的新实例,这就是为什么可以看到旧值的原因悬停时。
一种解决方案是,如果您想每次创建新图表,然后将图表存储在全局变量中,并且每当复选框处于选中状态时,都要检查图表是否存储在变量中,销毁它,然后创建一个新图表。
请参见下面的代码或小提琴-> https://jsfiddle.net/s0udzwv3/31/
test_labels = ["meh", "beh", "yeh"]
score = [4,3.8,5]
var s2 = document.getElementById("slct2");
s2.innerHTML = "";
for (var test in test_labels) {
if (test_labels.hasOwnProperty(test)) {
var pair = test_labels[test] + score[test];
var checkbox = document.createElement("input");
checkbox.type = "checkbox";
checkbox.name = "test_filter";
checkbox.value = pair;
checkbox.checked = true;
s2.appendChild(checkbox);
var label = document.createElement('label');
label.htmlFor = pair;
label.appendChild(document.createTextNode(pair));
s2.appendChild(label);
s2.appendChild(document.createElement("br"));
}
}
var myChart;
function fillCanvas (test_labels, score) {
var ctx = document.getElementById("myChart").getContext('2d');
ctx.innerHTML = "";
if(myChart)
{
myChart.destroy();
}
myChart = new Chart(ctx, {
type: 'bar',
data: {
labels : ["test_month"]
},
});
setTimeout(function () {
for (test in test_labels){
myChart.data.datasets.push({
backgroundColor: 'rgb(228,26,28)',
label: test_labels[test],
data: [score[test]]
});
}
myChart.update();
}, 1000);
}
fillCanvas(test_labels, score);
var filter_magic = function(e) {
test_selected = []
var table1 = document.getElementById("table1");
table1.innerHTML = "";
jQuery('input[type="checkbox"][name="test_filter"]').each(function() {
if (jQuery(this).is(':checked')) {
var tr = document.createElement('tr');
tr.innerHTML = this.value;
table1.appendChild(tr);
test_selected.push(this.value);
}
})
fillCanvas(test_selected, score);
}
jQuery('input[type="checkbox"][name="test_filter"]').on('change', filter_magic);
filter_magic();
另一种推荐的方法是仅用new Chart
加载一次图表,每次复选框切换时只需推送新数据集并调用存储在全局变量中的chart.update()方法。