angular - 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();
  }

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

标签： angulartypescriptchartschart.jsng2-charts

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 的服务并让该组件订阅它，以便它接收通知并调用更新图形的代码。

希望这可以帮助。