销毁 chart.js 个条形图以重绘其他图形

Question

我正在使用 Chart.js 库绘制条形图，但我想破坏条形图并在相同的 canvas 中制作新图。我试过这种方式来清除 canvas:

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.

的函数

<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
                                            });
                                            });

Answer 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
              });
              });

销毁 chart.js 个条形图以重绘其他图形

Destroy chart.js bar graph to redraw other graph

javascript

html

charts

chart.js