Angular 8 和 ng2 图表 - 更新标签和数据

Question

我有一个 Angular 项目，它有一个由 ng2-charts 生成的图表，该图表由用户自己通过标签的选择框和数据的输入字段输入的数据填充。虽然我可以用数据更新它，但如果我完全更改值，那么它不会更新值，它只会将它们添加为新值。请看下面的截图：

我已尝试查看此处和网络的其他区域，但没有找到解决我问题的答案。我相信这与针对数组的特定区域有关，但我无法找到正确的代码来做到这一点。

这是我当前的代码，允许我添加数据但不更新。我对 Angular 很陌生，所以如果某些代码有点……粗俗，请原谅我。

HTML：

        <div class="deposit-container">
          <div class="chart-container">
            <canvas
              baseChart
              width="290"
              height="290"
              [data]="doughnutChartData"
              [labels]="doughnutChartLabels"
              [options]="doughnutChartOptions"
              [colors]="doughnutChartColors"
              [chartType]="doughnutChartType"
            ></canvas>
          </div>
          <div class="source-container">
            <div
              *ngFor="let depositSource of depositSources; let depositParent = index"
              id="{{ 'source' + depositParent }}"
              class="deposit-source"
            >
              <mat-form-field class="dropdown">
                <mat-select placeholder="Deposit source" [(ngModel)]="depositSourceValue[depositParent]" [ngModelOptions]="{ standalone: true }" (selectionChange)="getLabel(depositParent)">
                  <mat-option
                    *ngFor="let deposit of deposits; let depositSourceOption = index"
                    [value]="deposit.value"
                    id="{{ 'option' + depositSourceOption }}"
                  >
                    {{ deposit.value }}
                  </mat-option>
                </mat-select>
              </mat-form-field>
              <mat-form-field class="textfield">
                <input
                  matInput
                  currencyMask
                  [options]="{ align: 'right', prefix: '£ ', thousands: ',', precision: 0 }"
                  placeholder="£ 0"
                  [(ngModel)]="depositSourceAmount[depositParent]"
                  [ngModelOptions]="{ standalone: true }"
                  (focusout)="getData(depositParent)"
                />
              </mat-form-field>
              <mat-icon (click)="removeDeposit(depositSource); removeData();">delete</mat-icon>
            </div>
            <a id="addDepositSource" (click)="appendDeposit()">+ Add Deposit Source</a>
          </div>
        </div>

TS 文件：

      deposits: Deposit[] = [
        { value: 'Builders Gift', viewValue: 'Builders Gift' },
        { value: 'Gift', viewValue: 'Gift' },
        { value: 'Loan', viewValue: 'Loan' },
        { value: 'Savings', viewValue: 'Savings' },
        { value: 'Sale of Property', viewValue: 'Sale of Property' },
        { value: 'Inheritance', viewValue: 'Inheritance' },
        { value: 'Vendor Gifted', viewValue: 'Vendor Gifted' },
        { value: 'Equity', viewValue: 'Equity' },
        { value: 'Forces Help to Buy Loan', viewValue: 'Forces Help to Buy Loan' },
        { value: 'Help to Buy ISA', viewValue: 'Help to Buy ISA' },
        { value: 'Porting', viewValue: 'Porting' },
        { value: 'Other', viewValue: 'Other' },
      ];

      public doughnutChartLabels: any [] = [];
      public doughnutChartData: any [] = [];
      public doughnutChartType = 'doughnut';

      public doughnutChartOptions = {
        legend: {
          display: false,
        }
      };

      public doughnutChartColors: Array<any> = [
        {
          backgroundColor: [
            'rgba(0,0,0,0.1)',
            'rgba(254, 11, 48, 1)',
            'rgba(86, 223, 144, 1)',
            'rgba(186, 223, 86, 1)',
            'rgba(191, 86, 223, 1)',
            'rgba(235, 5, 5, 1)',
            'rgba(43, 203, 186, 1)',
            'rgba(5, 235, 235, 1)',
            'rgba(169, 86, 223, 1)',
            'rgba(252, 92, 101, 1)',
            'rgba(86, 160, 223, 1)',
            'rgba(102, 86, 223, 1)',
            'rgba(223, 86, 218, 1)',
          ],
          hoverBackgroundColor: [
            'rgba(0,0,0,0.1)',
            'rgba(254, 11, 48, 1)',
            'rgba(86, 223, 144, 1)',
            'rgba(186, 223, 86, 1)',
            'rgba(191, 86, 223, 1)',
            'rgba(235, 5, 5, 1)',
            'rgba(43, 203, 186, 1)',
            'rgba(5, 235, 235, 1)',
            'rgba(169, 86, 223, 1)',
            'rgba(252, 92, 101, 1)',
            'rgba(86, 160, 223, 1)',
            'rgba(102, 86, 223, 1)',
            'rgba(223, 86, 218, 1)',
          ],
          borderWidth: 0
        },
      ];

      getLabel(depositParent) {
        let target = this.depositSourceValue[depositParent];
        this.doughnutChartLabels.push(target);
        this.chart.chart.update();
      }

      getData(depositParent) {
        let data = this.depositSourceAmount[depositParent];
        this.doughnutChartData.push(data);
        this.chart.chart.update();
      }

我试过像这样添加索引值：

    this.doughnutChartLabels[depositParent].push(target);

    this.doughnutChartData[depositParent].push(data);

但这只会给我以下错误：

DigitalPortalComponent.html:30 ERROR TypeError: this.doughnutChartLabels[depositParent].push is not a function
    at DigitalPortalComponent.getLabel (digital-portal.component.ts:499)

我也尝试使用数据集设置图表：

HTML：

    <canvas
      baseChart
      width="290"
      height="290"
     [datasets]="doughnutChartDataset"
     [labels]="doughnutChartLabels"
     [options]="doughnutChartOptions"
     [colors]="doughnutChartColors"
     [chartType]="doughnutChartType"></canvas>

TS：

      public doughnutChartDataset: any [] =
      [
        { data: [], label: 'Deposit Source' }
      ];

      public doughnutChartLabels: any [] = ['a'];
      public doughnutChartType = 'doughnut';

      public doughnutChartOptions = {
        legend: {
          display: false,
        }
      };

但我不知道如何将数据推送到数据集，所以我什至无法使用这种方法将数据添加到图表。

有人有什么想法吗？我觉得我离得不远了，但不能完全破解它。

编辑：

尝试使用“拼接”来查看是否可以更新数组中的相关数据，但这也不起作用。只是用于将数据添加到数组的末尾。

  changeData(depositParent) {
    let depositData = this.depositSourceAmount[depositParent];
    this.doughnutChartData.splice(depositParent, 0, depositData);
    this.chart.chart.update();
  }

走到尽头。有没有人需要在这里做类似的事情来动态编辑数组中的数据？

Answer 1

我在尝试对图表中使用的标签应用翻译时也遇到了这个问题。我也在 stackoverlfow 的某个地方读到，您必须更改您在图中使用的数组的引用。

对于你的例子，你可以试试

 getLabel(depositParent) {
    let target = this.depositSourceValue[depositParent];
    this.doughnutChartLabels = [...this.doughnutChartLabels, depositParent];
    // this.chart.chart.update();
  }

  getData(depositParent) {
    let data = this.depositSourceAmount[depositParent];
    this.doughnutChartData = [...this.doughnutChartData, depositParent];
    // this.chart.chart.update();
  }

我还建议您使用包含 Observable 的服务并让该组件订阅它，以便它接收通知并调用更新图形的代码。

希望这会有所帮助。