使用 NG2 图表动态更新圆环图

Question

我正在进行一个项目，我正在制作一个常量营养素计算器。我有一个用于输入值的表单，它显示一个圆环图，其初始值为 0。但是当我点击提交按钮时，图表没有更新。

这是我的代码：

home.component.html

<form (submit)="addMeal(totalGrams, proteinGrams, fatGrams, carbGrams)">
              <div class="form-group">
                <input
                  class="form-control"
                  type="number"
                  placeholder="Total"
                  #totalGrams
                />
              </div>
              <div class="form-group">
                <input
                  class="form-control"
                  type="number"
                  placeholder="Protein"
                  #proteinGrams
                />
              </div>
              <div class="form-group">
                <input
                  class="form-control"
                  type="number"
                  placeholder="Fat"
                  #fatGrams
                />
              </div>
              <div class="form-group">
                <input
                  class="form-control"
                  type="number"
                  placeholder="Carbs"
                  #carbGrams
                />
              </div>

              <button type="submit" class="btn btn-primary btn-block">
                Enviar
              </button>
            </form>

我只提供了表单代码，因为布局很大，很多 bootstrap 组件并没有真正影响核心问题。

home.component.ts

import { Component, ViewChild } from '@angular/core';
import { ChartData, ChartType } from 'chart.js';

@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.css']
})
export class HomeComponent {

  gProtein: number = 0;
  gCarbs: number = 0;
  gFat: number = 0;

  public doughnutChartLabels: string[] = [ 'Proteína', 'Carbohidratos', 'Grasa' ];
  public doughnutChartData: ChartData<'doughnut'> = {
    labels: this.doughnutChartLabels,
    datasets: [
      { data: [ this.gProtein, this.gCarbs, this.gFat ] },
    ]
  };
  public doughnutChartType: ChartType = 'doughnut';

  addMeal(totalGrams: HTMLInputElement, proteinGrams: HTMLInputElement, fatGrams: HTMLInputElement, carbGrams: HTMLInputElement) {
    this.doughnutChartData.datasets[0].data[0] = parseInt(proteinGrams.value);
    this.doughnutChartData.datasets[0].data[1] = parseInt(carbGrams.value);
    this.doughnutChartData.datasets[0].data[2] = parseInt(fatGrams.value);
    totalGrams.value = ''
    proteinGrams.value = ''
    fatGrams.value = ''
    carbGrams.value = ''
    totalGrams.focus()    
    return false;
  }

}

我不知道这个库最后一次更新是什么时候，但这是文档说你必须更新图表的方式（其他类型的图表，因为甜甜圈文档写得不是很好，imo） .

Answer 1

我也遇到了同样的情况。该文档实际上写得很好，但它并没有涵盖每个图表的每个场景，因此您必须在其他图表中寻找您要问的东西。我是看条形图解决的，你要做的就是这个

在你的 .ts 组件 中，导入这个：

import { BaseChartDirective } from 'ng2-charts';

然后，这个：

@ViewChild(BaseChartDirective) chart?: BaseChartDirective;

最后你要做的是这个（我格式化了你的 addMeal() 方法以便更好地阅读它）：

addMeal(
    totalGrams: HTMLInputElement,
    totalCals: HTMLInputElement,
    proteinGrams: HTMLInputElement,
    fatGrams: HTMLInputElement,
    carbGrams: HTMLInputElement
  ) {
    this.doughnutChartData.datasets[0].data[0] =
      parseInt(totalCals.value) * (parseInt(totalGrams.value) / 100);
    this.doughnutChartData.datasets[0].data[1] =
      parseInt(proteinGrams.value) * (parseInt(totalGrams.value) / 100);
    this.doughnutChartData.datasets[0].data[2] =
      parseInt(carbGrams.value) * (parseInt(totalGrams.value) / 100);
    this.doughnutChartData.datasets[0].data[3] =
      parseInt(fatGrams.value) * (parseInt(totalGrams.value) / 100);
    this.chart?.chart?.update();
    totalGrams.value = '';
    totalCals.value = '';
    proteinGrams.value = '';
    fatGrams.value = '';
    carbGrams.value = '';
    return false;
  }

如您所见，我只添加了一行，就在您设置清空表单字段之前，即 update() 方法。

我想给你一个建议，那就是阅读完整的文档，或者至少在你问问题之前阅读你正在使用的东西的所有文档，因为这个东西解释得很好 here.

使用 NG2 图表动态更新圆环图

Dynamically update doughnut chart with NG2Charts

typescript

ng2-charts

angular