javascript - 为什么使用 Chart.js 的 horizo​​ntalBar 报告刷新数据？

Question

我在我的应用程序中使用了 Chart.js(版本:2.7.2)的 horizo​​ntalBar 报告，但我遇到了问题使用带有新参数的 jquery 刷新数据(因此显示不同的数据)并将鼠标悬停在报告上我看到旧报告图表。

谷歌搜索我找到了这个分支 Destroy chart.js bar graph to redraw other graph in same <canvas>并尝试了 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 个 block :固定方式 # 1(2,3) BLOCK START但我都失败了。

可以通过链接看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

                });