Диаграмма JS показывает дрожание при наведении - PullRequest
1 голос
/ 31 января 2020

Я использую диаграмму JS


Попробуйте # 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/

1 Ответ

2 голосов
/ 06 февраля 2020

Пока вы используете конструктор new Chart(), в соответствии с документацией необходимо вызывать метод 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 случайных данных на локально случайный сгенерированные данные

Пожалуйста, дайте мне знать, если мой ответ недостаточно ясен или вам нужна дополнительная информация

...