javascript - ChartJS 显示悬停时抖动

Question

我正在使用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/

Answer 1

只要您使用 new Chart() 构造函数，根据documentation在将 Canvas 重新用于新图表之前，应调用 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 更改为本地随机生成的数据

如果我的答案不够清楚或者您需要一些其他信息，请告诉我