Зачем обновлять данные, используя горизонтальный отчет Chart.js?

Question

Я использую отчет горизонтального бара Chart.js (версия: 2.7.2) в своем приложении, и у меня проблема с обновлением данных с помощью jquery с новыми параметрами (поэтому отображаются разные данные) и при наведении указателя мыши на отчет. Я вижу старый отчетchart.

Поиск в Google Я нашел эту ветку Уничтожить гистограмму chart.js, чтобы перерисовать другой график в том же , и попробовал 3 способа исправить эту ошибку, например:

                var barOptions= {
                    legend: { display: false },
                    title: {
                        display: true,
                        text: 'Quizzes rating'
                    }
                };


/*
                // Fixing way # 1 BLOCK START
                $("#div_canvasQuizzesRating").remove();     // If to uncomment this block I got error : Uncaught TypeError: Cannot read property 'getContext' of null
                $("#div_canvasQuizzesRating").append('<div class="col-md-10 col-md-offset-1">\n' +
                    '                    <div class="panel panel-default">\n' +
                    '                        <div class="panel-body">\n' +
                    '                            <p class=" text-muted small">\n' +
                    '                                Any quiz can be rated from 1 till 5.\n' +
                    '                            </p>\n' +
                    '                            <canvas id="canvasQuizzesRating" width="800" height="450"></canvas>\n' +
                    '                        </div>\n' +
                    '                    </div>\n' +
                    '                </div>');

                // Fixing way # 1 BLOCK END
*/

                var grapharea = document.getElementById("canvasQuizzesRating").getContext("2d");


/*
                // Fixing way # 2 BLOCK START  // If to uncomment this block I DO NOT got error, but hovering mouse I have prior chart data visible
                var chartObject = new Chart(grapharea, { type: 'canvasQuizzesRating', data: valuesArray, options: barOptions });
                chartObject.destroy();
                // Fixing way # 2 BLOCK END
*/

                // $("canvas#chartreport").remove();

                var chartObject= new Chart(grapharea, {
                    type: 'horizontalBar',     // https://www.chartjs.org/docs/latest/charts/bar.html
                    data: {
                        labels: labelsArray,
                        datasets: [
                            {
                                label: "Average rating mark",
                                backgroundColor: this_chartBackgroundColors,
                                // backgroundColor: ["#005500", "#3e95cd", "#8e5ea2", "#ff063c", "#3cba9f", "#e8c3b9", "#ffff00", "#0000ff", "#fb6bff", "#55ffff", "#c6c7ff", "#aaff7f", "#a5aaff", "#fffda6", "#707070", "#c45850", "#dfdf00" ],
                                data: valuesArray
                            }
                        ]
                    },

                    options: barOptions

                });

                // // Fixing way # 3 BLOCK START // If to uncomment this block I DO NOT got error, but hovering mouse I have prior chart data visible
                // chartObject.update();
                // // Fixing way # 3 BLOCK END

Приведенный выше код содержит 3 блока, когда я пытался исправить эту ошибку: Исправление пути # 1 (2,3) БЛОК-СТАРТ Но у меня не получилось со всеми из них.

Вы можете посмотреть его по ссылке http://votes.nilov -sergey-demo-apps.tk / admin / report_quizzes_rating (будет страница входа с предоставленными кредитными картами).Открытие этой страницы результатов без фильтров будет показано.Затем выберите 1 категорию (например, «История»), нажмите «Отчет» и наведите курсор мыши на отчет - вы увидите проблему.

Как решить эту проблему?

Спасибо!

Answer 1

Задайте глобальную область видимости для переменной и присвойте переменную свой div.как показано ниже

window.chartObject= new Chart(grapharea, {
                    type: 'horizontalBar',     // https://www.chartjs.org/docs/latest/charts/bar.html
                    data: {
                        labels: labelsArray,
                        datasets: [
                            {
                                label: "Average rating mark",
                                backgroundColor: this_chartBackgroundColors,
                                // backgroundColor: ["#005500", "#3e95cd", "#8e5ea2", "#ff063c", "#3cba9f", "#e8c3b9", "#ffff00", "#0000ff", "#fb6bff", "#55ffff", "#c6c7ff", "#aaff7f", "#a5aaff", "#fffda6", "#707070", "#c45850", "#dfdf00" ],
                                data: valuesArray
                            }
                        ]
                    },

                    options: barOptions

                });

Добавить строки ниже глобальной области видимости: эта команда проверит, создана диаграмма или нет.Если да, он уничтожит и перерисовает график

    //clear chart
    if (window.chartObject!= undefined)
        window.chartObject.destroy();

Таким образом, окончательный код будет:

     if (window.chartObject!= undefined)
                window.chartObject.destroy();


window.chartObject= new Chart(grapharea, {
                    type: 'horizontalBar',     // https://www.chartjs.org/docs/latest/charts/bar.html
                    data: {
                        labels: labelsArray,
                        datasets: [
                            {
                                label: "Average rating mark",
                                backgroundColor: this_chartBackgroundColors,
                                // backgroundColor: ["#005500", "#3e95cd", "#8e5ea2", "#ff063c", "#3cba9f", "#e8c3b9", "#ffff00", "#0000ff", "#fb6bff", "#55ffff", "#c6c7ff", "#aaff7f", "#a5aaff", "#fffda6", "#707070", "#c45850", "#dfdf00" ],
                                data: valuesArray
                            }
                        ]
                    },

                    options: barOptions

                });