Question

我正在使用Chart.js使用折线图和条形图。我有2个显示其数据的选项：单击按钮之前和单击按钮之后。两种情况都运行良好。但是问题在于，每当单击按钮并将鼠标光标悬停在上方图形上时，它就会显示旧数据（所有时间）。

预期结果：图表不应再包含以前的数据，而应显示新数据，并且用户可以毫无问题地与之交互。

实际结果：图表显示了新数据，但是如果用户将鼠标悬停在图表上，它将在原始数据和新数据之间来回闪烁

这是代码

显示图表

<div ngDraggable class="col-lg-4 my-2 drag-block" *ngFor="let selectedItem of selectedKpi" (edge)="checkEdge($event)"
        [bounds]="myBounds" [inBounds]="inBounds">
        <mat-card>
          <mat-card-header>
            <mat-card-title>
              <h5>{{selectedItem}}</h5>
            </mat-card-title>
          </mat-card-header>
          <mat-card-content>
            <canvas id="{{selectedItem}}">{{chart}}</canvas>
          </mat-card-content>
        </mat-card>
      </div>

打字稿代码：

this.selectedKpi = ["Clicks", "Orders", "Revenue", "Impressions"];

drawChart(kpi, divId, chartType, isFilled, data, labels, backgroundColor, borderColor) {
            setTimeout(function () {
              const canvas = <HTMLCanvasElement>document.getElementById(divId);
              const ctx = canvas.getContext('2d');
              this.element = document.getElementById(divId) as HTMLElement;
              this.element.style.destroy;
              this.chart = new Chart(ctx, {
                type: chartType,
                data: {
                  labels: labels,
                  datasets: [{
                    tension: 0,
                    label: kpi,
                    data: data,
                    fill: isFilled,
                    backgroundColor: backgroundColor,
                    borderWidth: 2,
                    pointBorderColor: borderColor,
                    pointRadius: 4,
                    borderJoinStyle: 'miter',
                  }]
                },
                options: {
                  responsive: true,
                  maintainAspectRatio: true,
                  scales: {
                    xAxes: [{
                      gridLines: {
                        display: true,
                        lineWidth: 1
                      }
                    }],
                    yAxes: [{
                      gridLines: {
                        display: true,
                        lineWidth: 1
                      }
                    }]
                  },
                  tooltips: {

                    mode: 'x',
                    callbacks: {
                      labelColor: function (tooltipItem, charts) {
                        return {
                          borderColor: borderColor,
                          backgroundColor: borderColor
                        };
                      },
                      labelTextColor: function (tooltipItem, charts) {
                        return '#3e95cd';
                      }
                    }
                  }, legend: {
                    display: false
                  }, emptyOverlay: {
                    fillStyle: 'rgba(74, 100, 100, 0.04)', 
                    fontColor: 'rgba(0, 0, 0, 1)', 
                    fontStrokeWidth: 0       
                  }
                }
              });
            }, 100);
          }

请指导我如何销毁画布并使用其ID重新绘制。

我也创建了一个stackblitz演示。以下是网址。

https://stackblitz.com/edit/angular-sqnxbq

Answer 1

在更新图表时，这是一个非常常见的问题。请在您的updateCharts(buttonClick: string)方法的开头添加以下代码。

Chart.helpers.each(Chart.instances, function (instance) {
        instance.destroy();
      });

它将在更新之前销毁所有先前的图表实例。我希望这就是您的期望。

如何使用ID销毁画布并将新画布添加到相同的ID

1 个答案: