javascript - ChartJS在悬停时显示抖动

我正在使用chartJS





尝试＃1

var ctx = document.getElementById(configs.selectorId).getContext('2d');
// chart.destroy();
var chart = new Chart(ctx, options);

试试＃2

var ctx = document.getElementById(configs.selectorId).getContext('2d');
var chart = new Chart(ctx, options);
chart.update();

试试＃3

var ctx = document.getElementById(configs.selectorId).getContext('2d');
window[configs.selectorId] = new Chart(ctx, options);
window[configs.selectorId].update();

试试＃4

if(window[configs.selectorId] && window[configs.selectorId] !== null){
    window[configs.selectorId] = []
}

var ctx = document.getElementById(configs.selectorId).getContext('2d');
window[configs.selectorId] = new Chart(ctx, options);

试试＃6

if(window[configs.selectorId] && window[configs.selectorId] !== null){

    // console.log(window[configs.selectorId]);
    delete window[configs.selectorId];
}

console.log(window);

var ctx = document.getElementById(configs.selectorId).getContext('2d');
window[configs.selectorId] = new Chart(ctx, options);
window[configs.selectorId].update();

试试＃6

$('canvas').html("");

before call my chart

请提供建议。

我在这里重现：http://bheng-charts-demo.herokuapp.com/

最佳答案

只要使用的是new Chart()构造函数，就应在对画布重新使用新图表之前调用对documentation destroy方法的编码。

在您的情况下，它应如下工作

if(window[configs.selectorId] && window[configs.selectorId] !== null){

    if (typeof window[configs.selectorId].destroy === 'function') {
        window[configs.selectorId].destroy();
    }
    delete window[configs.selectorId];
}

这是我根据您的代码创建的一个片段：
https://codepen.io/sergey_mell/pen/qBdBVpe
我刚刚将您的随机数据API更改为本地随机生成的数据

请让我知道我的答案不够清楚，或者您需要其他信息

关于javascript - ChartJS在悬停时显示抖动，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/60009719/