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

Question

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

<< img src =“ https://image.soinside.com/eyJ1cmwiOiAiaHR0cHM6Ly9pLmltZ3VyLmNvbS9mUHhZT2JOLnBuZyJ9” alt =“首次添加数据”>“>

我曾尝试在此处和网络的其他区域进行检查，但没有找到解决我的问题的答案。我相信这与定位数组的特定区域有关，但是我不能完全按正确的代码来进行操作。

这是我当前的代码，它使我可以添加数据但不能更新。我对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();
  }
到达我的绳索尽头。在这里需要动态编辑数组中的数据的人是否有必要做类似的事情？

我有一个Angular项目，该项目具有一个由ng2-charts生成的图表，该图表由用户自己通过标签的选择框和数据的输入字段输入的数据填充。虽然我...

Answer 1

您是否通过动态获取数据完成了它？