用NG2Charts动态更新甜甜圈图

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>

我只提供了表单代码，因为有一个大的布局和许多引导组件，并不真正影响核心问题。

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

我也是这样。文档实际上写得很好，但它并没有涵盖每个图表的每个场景，所以你必须在其他图表中寻找你想要的东西。我通过看柱状图解决了这个问题，你要做的是:

在中。

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()

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