javascript - 更改 Angular 为 10 的图表的数据集

Question

我正在尝试创建一个折线图，您可以在其中从下拉菜单中选择您的数据集，然后图表将更新以使用您选择的新数据集。

这是其中一个下拉菜单项的 HTML，当您单击该项目时，它会转到将更新图表数据集的方法。

<li role="menuitem">
          <a class="dropdown-item" href="javascript:;" (click)="callMe(1)">{{
            "dashboards.female-people" | translate
          }}</a>
        </li>

在此函数内部，根据按下的菜单项，我为其分配了不同的数据集。

callMe(option: number) {
    if (option === 1) {
      this.areaData = areaChartDataFemale;
    } else {
      this.areaData = areaChartDataMale;
    }
    this.areaChartComponent.updateChart();
  }

问题是图表设置了一些默认数据，然后永远不会更新。我偶然发现了这个 chart.update();方法，但由于图表是在另一个组件中创建的，我无法再访问该图表。当我调用它时 this.areaChartComponent.updateChart();

updateChart() {
    if (this.chart) {
      this.chart.update();
    }
  }

它不知道图表是什么，因为它是 undefined，因此不会更新。我相信我使用这种更新方法是在正确的轨道上，但我相信我需要获取图表的实例才能更新它。任何帮助将不胜感激!

这是添加组件的 HTML 部分:

<app-area-chart
      [shadow]="true"
      class="chart"
      [options]="chartDataConfig.areaChartOptions"
      [data]="areaData">
    </app-area-chart>

这是设置默认数据的地方:

 areaData = areaChartDataFemale;

  callMe(option: number) {
    if (option === 1) {
      this.areaData = areaChartDataFemale;
    } else {
      this.areaData = areaChartDataMale;
    }
    // this.chart.update();
    this.areaChartComponent.updateChart();
  }

Answer 1

你需要销毁图表然后重新创建它

在你的 area-chart-component.ts 中创建一个函数

updateChart() {
    this.chart.destroy();
    const chartRefEl = this.chartRef.nativeElement;
    const ctx = chartRefEl.getContext('2d');
    this.chart = new Chart(ctx, {
      type: this.shadow ? 'lineWithShadow' : 'line',
      data: this.data,
      options: this.options,
    });
  }

然后调用这个函数

callMe(option: number) {
    if (option === 1) {
      this.AreaChartComponentRef.data = areaChartDataFemale;
      this.AreaChartComponentRef.updateChart();

    } else {
      // this.isFemaleSelected = false;
      this.AreaChartComponentRef.data = areaChartDataMale;
      this.AreaChartComponentRef.updateChart();
      
    }