为什么要使用Chart.js的horizo​​ntalBar报告刷新数据?

时间:2018-10-22 06:31:45

标签: javascript charts

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

Google搜索,我发现了这个分支 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个块: 固定方式#1(2,3)BLOCK START 但是我都失败了。

您可以通过链接http://votes.nilov-sergey-demo-apps.tk/admin/report_quizzes_rating进行查看 (将提供带有信用凭证的登录页面)。 打开此页面将显示不带过滤器的结果。 然后请选择1个类别( 例如“历史记录”),然后单击“报告”,然后将鼠标悬停在报告上-您会看到问题。

如何解决此问题?

谢谢!

1 个答案:

答案 0 :(得分: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

                });