如何为每次更新清除画布？ [复制]

Question

我的第一个 ionic Web 应用程序有问题。我应该做一些图表，所以我决定使用 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
                                        }
                              }]
                    }
            }
  });

在网上搜索 (How to clear the canvas for redrawing) 我尝试添加这些行：

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

但我仍然有问题。

Demonstration of my problem

你能帮帮我吗？谢谢。

Answer 1

您可能需要使用官方 d3.js API 到clear a chart。 web api清除canvas很暴力，可能会导致问题。