我的图表(使用 ChartJs)遇到问题，一旦我编辑了图表上的数据，如果我将鼠标悬停在同一个图表上，它偶尔会出现故障，无法显示以前的数据。
我已经用谷歌搜索了这个问题，我知道大多数时候的解决方案是使用 .destroy()，但无论出于何种原因(也许我没有将其放在正确的位置) ？)这对我不起作用。我的实际代码非常长且复杂，因此我取出了一些位并随机生成数组以使其简单。基本问题应该仍然存在。
function genCharts() {
var colours = ['#ff3232', '#ff5731', '#ff9130', '#ffc730', '#fffb30', '#cbff30', '#7bff30', '#30ff55', '#30ffb9', '#30f4ff', '#42a3ff', '#6083ff', '#7760ff', '#c535ff', '#ff34fb', '#ff33aa', '#ff3276', '#ff3149', '#ff3232', '#ff5731', '#ff9130', '#ffc730', '#fffb30', '#cbff30', '#7bff30', '#30ff55', '#30ffb9', '#30f4ff', '#42a3ff', '#6083ff', '#7760ff', '#c535ff', '#ff34fb', '#ff33aa', '#ff3276', '#ff3149', '#ff3232', '#ff5731', '#ff9130', '#ffc730', '#fffb30', '#cbff30', '#7bff30', '#30ff55', '#30ffb9', '#30f4ff', '#42a3ff', '#6083ff', '#7760ff', '#c535ff', '#ff34fb', '#ff33aa', '#ff3276', '#ff3149']
var chartTheme = {
type: 'line',
data: {
labels: ['3.1', '3.2'],
},
options: {
legend: {
display: false
},
tooltips: {
xPadding: 15,
yPadding: 15,
titleFontColor: 'rgb(256,256,256)',
backgroundColor: 'rgba(67, 183, 249,0.8)',
displayColors: false,
cornerRadius: 3,
},
scales: {
yAxes: [{
scaleLabel: {
display: true,
labelString: 'PRICE'
}
}]
}
},
};
var chartId = document.getElementById('chart').getContext('2d');
var chart = new Chart(chartId, chartTheme);
chart.destroy();
chart = new Chart(chartId, chartTheme);
var array = [Math.random(), Math.random(), Math.random(), Math.random(), Math.random(), Math.random()];
var array2 = [Math.random(), Math.random(), Math.random(), Math.random(), Math.random(), Math.random()];
var i;
for (i = 0; i < array.length; i++) {
var newData = {
data: [array[i], array2[i]],
label: 'random number',
pointStyle: 'rectRot',
pointRadius: 5,
pointBorderWidth: 5,
pointHoverBorderColor: 'rgba(256,256,256)',
pointHoverRadius: 8,
pointHoverBorderWidth: 8,
borderColor: colours[i]
}
chart.data.datasets.push(newData);
}
chart.update();
}<!DOCTYPE html>
<html>
<head>
</head>
<body>
<input type='button' value='generate' id='button' onclick='genCharts()'>
<div style='height:200px; width: 200px;'>
<canvas width='10' height='10' id='chart' style='height:10px; width: 100px;'></canvas>
</div>
</body>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.bundle.js'></script>
<script src='scriptOne.js'></script>
</html>最佳答案
嗯，这不是销毁图表的正确方法，图表变量是局部变量，您正在为局部变量创建一个新图表并再次销毁它，这并不意味着它已经销毁了所有其他先前创建的实例。其中一种解决方案是创建一个全局变量来保存图表，并在每次调用 genCharts() 时销毁该变量。这是 fiddle -> http://jsfiddle.net/srgw2y7m/
希望对你有帮助!
var chart;
function genCharts() {
if (chart) {
chart.destroy();
}
var colours = ['#ff3232', '#ff5731', '#ff9130', '#ffc730', '#fffb30', '#cbff30', '#7bff30', '#30ff55', '#30ffb9', '#30f4ff', '#42a3ff', '#6083ff', '#7760ff', '#c535ff', '#ff34fb', '#ff33aa', '#ff3276', '#ff3149', '#ff3232', '#ff5731', '#ff9130', '#ffc730', '#fffb30', '#cbff30', '#7bff30', '#30ff55', '#30ffb9', '#30f4ff', '#42a3ff', '#6083ff', '#7760ff', '#c535ff', '#ff34fb', '#ff33aa', '#ff3276', '#ff3149', '#ff3232', '#ff5731', '#ff9130', '#ffc730', '#fffb30', '#cbff30', '#7bff30', '#30ff55', '#30ffb9', '#30f4ff', '#42a3ff', '#6083ff', '#7760ff', '#c535ff', '#ff34fb', '#ff33aa', '#ff3276', '#ff3149']
var chartTheme = {
type: 'line',
data: {
labels: ['3.1', '3.2'],
},
options: {
legend: {
display: false
},
tooltips: {
xPadding: 15,
yPadding: 15,
titleFontColor: 'rgb(256,256,256)',
backgroundColor: 'rgba(67, 183, 249,0.8)',
displayColors: false,
cornerRadius: 3,
},
scales: {
yAxes: [{
scaleLabel: {
display: true,
labelString: 'PRICE'
}
}]
}
},
};
var chartId = document.getElementById('chart').getContext('2d');
chart = new Chart(chartId, chartTheme);
var array = [Math.random(), Math.random(), Math.random(), Math.random(), Math.random(), Math.random()];
var array2 = [Math.random(), Math.random(), Math.random(), Math.random(), Math.random(), Math.random()];
var i;
for (i = 0; i < array.length; i++) {
var newData = {
data: [array[i], array2[i]],
label: 'random number',
pointStyle: 'rectRot',
pointRadius: 5,
pointBorderWidth: 5,
pointHoverBorderColor: 'rgba(256,256,256)',
pointHoverRadius: 8,
pointHoverBorderWidth: 8,
borderColor: colours[i]
}
chart.data.datasets.push(newData);
}
chart.update();
}
关于javascript - ChartJS 动态折线图在悬停时会重影回旧数据，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/52842108/