首先，我制作了一个简短的视频来准确展示我遇到的问题。
总结一下视频：在使用 Chart.js (2.6.0( 时，我可以毫无问题地创建我的图表;但是当我将鼠标悬停在条形/点上时，图表将调整其元素的大小并闪烁。奇怪的是，它完全不一致。有时当我刷新时，它根本没有这种行为;但是，如果我将鼠标悬停在某物上并且它开始这样做，它不会停止，直到我再次刷新或关闭选项卡(它也与此不一致(。发生这种情况时，我不会更改代码中的任何内容，它会自行完成所有操作。
为了修复它，我在SO上引用了许多其他线程，以及Chart.js文档。在我的解决方案中：我特意将指定的高度/宽度添加到创建图表的 Divs & Canvas 中;将动画持续时间设置为 0，将悬停动画持续时间设置为 0，将响应动画持续时间设置为 0;我已确保响应设置为true，并将保持纵横比为true，更改了工具提示模式...我已经尝试了所有这些，以及其他似乎几乎没有效果的小东西。
我被难住了！
这是我的图表代码之一(没有我如何抓取 JSON 数据等，只是图表(：
new Chart($("#runwayChart"), {
type: "horizontalBar",
data: {
labels: runwayLabels,
datasets: [{
label: "Months Left", fill: true,
backgroundColor: "#3333ff",
borderColor: "#3333ff",
data: score
}, {
label: "Expenses",
fill: true,
backgroundColor: "#aa2222",
borderColor: "#aa2222",
data: expenses
}, {
label: "Revenue",
fill: true,
backgroundColor: "#2222aa",
borderColor: "#2222aa",
data: revenues
}]
},
options: {
tooltips: {
mode: 'index'
},
responsive: true,
maintainAspectRatio: true,
animation: {
duration: 0,
},
hover: {
animationDuration: 0,
},
responsiveAnimationDuration: 0
}
});
我将不胜感激你们所有人的任何帮助！
谢谢=(
我看到有人写了这篇文章的答案已经有一段时间了。我通过应用两件事解决了闪烁问题。
第一个当我声明我使用的图表时：
var ctx = document.getElementById('chart').getContext('2d');
window.chart = new Chart(ctx, {}) ...
而不是var chart = new Chart(ctx, {})..
通过这种方式，我们确保图表已附加到窗口
。 对象。其次
在绘制新图之前(例如用于数据更新(，我们需要确保以前的画布已被销毁。我们可以使用以下代码进行检查：
if(window.chart && window.chart !== null){
window.chart.destroy();
}
这实际上是一个非常简单而奇怪的解决方案。
当数据点靠近图表顶部时，图表将尝试根据div 调整大小。由于图表位于更大的画布中，因此将其放入自己的div可以解决此问题。
<div>
<canvas id="chart"></canvas>
</div>
像这样格式化它是解决方案=(
试试这个：
var myLineChart = null;
function createChart() {
var ctx1 = document.getElementById("barcanvas").getContext("2d");
myLineChart = new Chart(ctx1, {
type: 'horizontalBar',
data: {
labels: runwayLabels
, datasets: [{
label: "Months Left"
, fill: true
, backgroundColor : "#3333ff"
, borderColor: "#3333ff"
, data: score
}, {
label: "Expenses"
, fill: true
, backgroundColor : "#aa2222"
, borderColor: "#aa2222"
, data: expenses
}, {
label: "Revenue"
, fill: true
, backgroundColor : "#2222aa"
, borderColor: "#2222aa"
, data: revenues
}]
}
options:
{
scales: {
xAxes: [{
ticks: {
callback: function (tick) {
var characterLimit = 20;
if (tick.length >= characterLimit) {
return tick.slice(0, tick.length).substring(0, characterLimit - 1).trim() + '...';
}
return tick;
}
}
}]
},
tooltips: {
callbacks: {
// We'll edit the `title` string
title: function (tooltipItem) {
// `tooltipItem` is an object containing properties such as
// the dataset and the index of the current item
// Here, `this` is the char instance
// The following returns the full string
return this._data.labels[tooltipItem[0].index];
}
}
},
title:
{
display: true,
text: "Your Chart Title"
},
responsive: true,
maintainAspectRatio: true
}
});
}
我的角度应用程序(angular v6 和 chartjs 2.9.4(遇到了同样的问题。 在重新绘制图表之前添加延迟并销毁图表实例后解决了我的问题。
public redraw() {
setTimeout(() => {
if (this.chart && this.chart != null) {
this.chart.destroy()
}
this.chart = new Chart(this.chartId, this.chartConfig);
}, 500);
}