如何清除每个更新的画布？[重复]

Question

我的第一个ionic网络应用程序有问题。我应该做一些图表，所以我决定使用d3.js和tree.js。我增加了用不同类型的图表可视化我的数据的可能性。当我在同一个画布上绘制不同的图表时，问题出现了，所以我想我必须在每次更新之前清除画布。这是我的代码:

// Some operations

var canvas = this.components.toArray()[idItem].nativeElement;

this.barChart = new Chart(canvas, {

  type: type,
  data: {
          labels: keys,
          datasets: [{
                      label: label,
                      data: values,
                      backgroundColor: 'rgba(255, 99, 132, 0.2)',
                      borderColor: 'rgba(255,99,132,1)',
                      borderWidth: 1
                    }]
        },
  options: {
            scales: {
                      yAxes:  [{
                                ticks: {
                                        beginAtZero:true
                                        }
                              }]
                    }
            }
  });

在网络上搜索（如何清除画布以进行重绘），我试图添加以下行：

var context = canvas.getContext('2d');
context.clearRect(0, 0, canvas.width, canvas.height);

但是我仍然有问题。

演示我的问题

你能帮我吗？谢了。

Answer 1

您可能需要使用官方的d3.js API来清除图表。通过web api清除画布非常暴力，可能会导致问题。