我显示一个带有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();
这不是更新图表的正确方法,在您的代码中,每次更新图表时,您都在创建图表的新实例,而不会破坏前一个实例,这就是为什么您可以在悬停时看到旧值。
一个解决方案是,如果你想每次都创建一个新的图表,然后把你的图表存储在一个全局变量中,每当复选框被切换,然后检查图表是否存储在变量中,销毁它,然后创建一个新的。
请参阅下面的代码或fiddle-
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()方法。
我正在使用chart.js在html页面中创建多个图表,并且在Windows加载之后,图表将以每秒的速度动态更新,并使用新的数据值。我正在使用chart.js update()函数处理更新。所有创建的图表都存储在全局数组中,然后获取这些图表进行更新。 当我第一次打开html页面时,每秒都会更新图形(显示实时测量数据),但当我移动到webapp中的另一个子页面,然后返回到图形应该所在的页面时,所有画
我使用Chart.js库绘制条形图,我想显示工具提示不仅在条形图悬停,而且在x轴标签悬停该条形图。我找到了用于配置的方法,但它只允许我访问当前悬停栏的数组,这是没有用的。 那个么,我怎样才能访问鼠标事件,并从那个里获取位置,将其与条形标签的位置进行比较呢?还是有别的办法? 我当前的配置: 它只打印出悬停条数据,但我坚持要想出如何扩展它以满足我需要的行为。
问题内容: 我正在尝试获得一个工具提示,以显示任务的当前进度。所以,我想的是,工具提示文本的变化 而 显示工具提示。但是,当我调用时,显示的文本将保持不变,直到我从工具提示组件退出鼠标并再次输入。之前打电话不会改变任何事情。 问题答案: 实际上,即使在两次调用之间将工具提示重置为null时,它也不会自我更新。 到目前为止,我发现的唯一技巧是模拟鼠标移动事件并将其转发到TooltipManager上
我使用的是Chart.js2.6,我已经实现了horizontalLine插件,在条形图上显示平均值。它可以正常工作,但是当工具提示显示在与直线相交的位置时,它部分被水平线本身覆盖。我试图找出如何使工具提示在水平线上方绘制。 我知道工具提示是canvas元素的一部分,因此没有z-index属性。我怎样才能做到这一点? 下面是我使用的水平线插件。 ... 然后我使用以下命令将其添加到条形图选项中 它
我在使用mousemove事件显示工具提示时遇到了一些麻烦。基本上,当我的鼠标指针在图片框的某些区域上时,我想显示一个工具提示。我试图使用mousemove事件来完成此操作,确定阉羊指针位于最佳位置,并(如果是这样)使用settools tip设置工具提示。 这是我的mousemove事件(我注意到,当显示工具提示时,mousemove会持续触发,我会检查位置是否真的发生了变化) 这工作正常,除了