销毁 chart.js 条形图以重绘其他图表答案

【问题标题】：Destroy chart.js bar graph to redraw other graph销毁 chart.js 条形图以重绘其他图表
【发布时间】：2022-02-14 23:26:23
【问题描述】：

我正在使用 Chart.js 库绘制条形图，但我想销毁条形图并在同一个画布中创建一个新图。我试过这种方法来清除画布：

var chart = new Chart( ctx, {
                                            type : "bar",
                                            data : data1,
                                            options : options
                                            });
                                                                                                                                                                                                      
                                            $("#btn1").on("click", function() { 
                                                if (chart) chart.destroy();
                                                var chart = new Chart( ctx, {
                                            type : "bar",
                                            data : data1,
                                            options : options
                                            });
                                            });

我说的对吗？在 ButtonClick 上，我调用这个函数，它使用相同的画布。

<canvas id="graph" width="700px" height="300px"></canvas>

var ctx = $("#graph");

编辑：

我更改了代码，但只在我第一次单击按钮时起作用，当我第二次更改时，它不会再次起作用。

最棘手的是，为了工作，我需要更改 2 个图形的名称

var ctx = document.getElementById('graph');
                                            var myChart = new Chart( ctx, {
                                            type : "bar",
                                            data : data1,
                                            options : options
                                            });
                                                                                                                                                                                                      
                                            
                                            $("#btn2").on("click", function() {
                                            if (myChart) myChart.destroy();   
                                            var ctx = document.getElementById('graph');
                                            var chart = new Chart( ctx, {
                                            type : "bar",
                                            data : data2,
                                            options : options
                                            });
                                            });

【问题讨论】：

您使用的是 jQuery，但 chartjs 需要 canvas 元素本身。您可能需要将var ctx = $("#graph"); 替换为var ctx = document.getElementById("graph");
我尝试更改但问题仍然存在
到底是什么问题？您是否检查了控制台的错误消息？当我尝试这个时，它工作正常：jsfiddle.net/ewL2agqm
这能回答你的问题吗？ How to remove old chart and append new chart to div using chartjs
问题是图还是显示上一张，我改成你放的代码但是问题没有解决

标签： javascript html charts chart.js

【解决方案1】：

感谢大家的帮助，但我已经得到了它，对于未来的疑问，我会将我的解决方案放在这里给需要的人

    var ctx = document.getElementById('graph').getContext('2d');
                                var myBarChart = new Chart( ctx, {
                                type : "bar",
                                data : data1,
                                options : options
                                });
                                                                                                                                                                                          
                                $("#btn1").on("click", function() { 
                                    var context1 = document.getElementById('graph').getContext('2d');
                                    if (myBarChart) myBarChart.destroy();
                                    myBarChart = new Chart( context1, {
                                type : "bar",
                                data : data1,
                                options : options
                                });
                                });

                                $("#btn2").on("click", function() {
 var context2 = document.getElementById('graph').getContext('2d');
              if (myBarChart) myBarChart.destroy();
              myBarChart = new Chart( context2, {
              type : "bar",
              data : data2,
              options : options
              });
              });

【讨论】：