Javascript 显示新图表后如何“销毁”上一张图表（画布）|角度4

我有一个代码，可以在选择下拉菜单后更新图形的数据。但是，当我选择一个选项时，它看起来像是新图形和旧图形同时停留在同一画布上

这是我的密码：

funcao(){

  this.graphicService.getDatas().subscribe(datas => {
        this.datas = datas; //Gets the data from the API and put on local datas variable

        if(this.data[0].dimension == "Tech")
        {
          this.counter=0;
        }
        else if(this.data[0].dimension == "Bus"){
          this.counter=1;
        }
              this.barChartData = { //Bar graphic data
                  labels: ["Entry", "Foundation"],
                  datasets: [{
                      label: this.datas[this.counter].subdimensions[0].name,
                      backgroundColor: 'rgba(37, 230, 131,0.7)'
                      data: [
                          this.datas[this.counter].subdimensions[0].entry,
                          this.datas[this.counter].subdimensions[0].foundation
                      ]
                  }]

              };

              this.canvas = document.getElementById('myChart');
              this.ctx = this.canvas.getContext('2d');

              let myChart = new Chart(this.ctx, { // Bar graphic configs
                     type: 'bar',
                     data: this.barChartData,
                     options: {
                         scales: {
                            yAxes: [{
                                ticks: {
                                    beginAtZero: true
                                }
                            }]
                          }
                     }
                 });
      });
}

HTML

我想做的是旧图形消失，只有新图形留在屏幕上。

canvas api定义了一个clearRect方法

您可以在创建新图表之前清除画布

this.ctx = this.canvas.getContext('2d');
this.ctx.clearRect(0, 0, 100,100);

您已经阅读了文档。

试试这个方法

保持对图表实例的可访问引用this.myChart在我的示例中：

this.myChart = new Chart(this.ctx, { // Bar graphic configs
  type: 'bar',
  data: this.barChartData,
  options: {
    scales: {
      yAxes: [{
        ticks: {
          beginAtZero: true
        }
      }]
    }
  }
});

然后，当您需要销毁它时，请拨打：

// Destroys a specific chart instance
this.myChart.destroy();

以下是销毁函数的代码复制自：

因此，destroy函数将同时处理ChartJS和canvas API，如下所示：

在画布重新用于新图表之前，必须调用此函数

---

看起来您正在使用ChartJS库。在这种情况下，您可以使用该方法销毁任何以前的图表实例

ꜰɪʀꜱᴛ

添加图表实例将存储在图表组件类中的属性：

public myChart: Chart

ꜱᴇᴄᴏɴᴅ

在创建新的图表实例之前，请检查并销毁图表实例（如果有）：

...
if (this.myChart) this.myChart.destroy(); //destroy prev chart instance
this.myChart = new Chart(this.ctx, {
         type: 'bar',
         data: this.barChartData,
         ...

---

我知道这个问题已经解决了，但我遇到了同样的问题，这个解决方案不起作用，可能是因为我使用的是最新版本

如果有人正在阅读此线程，并且与我处于相同的情况，这就是我的情况：在ngOnDestroy钩子中手动从DOM中移除画布

  ngOnDestroy(){
    ( < HTMLCanvasElement > document.getElementById('myChartCanvas')).remove();
  }

---

很高兴知道，但我应该把代码放在哪里？我试图使用它，但现在新的和旧的图形都是空白的。@Gustavo我在答案中添加了更多内容。添加了它，但仍然和以前一样，新的和旧的同时显示。唯一的其他解释是，实际上一次为同一画布生成了多个图表。您确定图表库不会在更改此.barChartData时仅更新图形吗？看起来数据总是在同一画布上，如上面提到的@toskv。因此，无论我何时销毁它，当新的一个进来时，旧数据将在同一画布上，我认为.destroy函数将处理CHartJS和canvas API上所有需要的操作。请参阅我对答案的更新

public myChart: Chart

...
if (this.myChart) this.myChart.destroy(); //destroy prev chart instance
this.myChart = new Chart(this.ctx, {
         type: 'bar',
         data: this.barChartData,
         ...

  ngOnDestroy(){
    ( < HTMLCanvasElement > document.getElementById('myChartCanvas')).remove();
  }