在 Angular 4 中动态填充 ng2 图表

Question

我编写了一个示例应用程序，以 json 格式从服务中获取数据并将其绑定到 UI 上的图表。

问题是当我尝试绑定数据时，它不会。我尝试了很多方法来绑定数据，但没有成功。

功能如下： 第 1 页：包含 2 个下拉列表。1 个包含图表类型，2nd 包含样本类型。 在选择这两个下拉值时，我单击一个按钮，该按钮会在全局服务中触发函数 fetchData()。

以下是GlobalService中的getter和setter

getChartData() {
return this.chartData;
}
setChartData(response: any) {
this.chartData = response.data;
// console.log(this.chartData);
}
getChartlabel() {
return this.chartLabel;
}
setChartLabel(response: any) {
this.chartLabel = response.label.label;
// console.log(this.chartLabel);
}
getResponse() {
return this.response;
}
setResponse(response: any) {
this.response = response;
// console.log(response);
}

功能是这样的

fetchData(chart: any, sample: any) {
console.log();
const request = {
chartType: this.selectedChart, // 'BAR | LINE'
sampleType: this.selectedSample // 'COUNT'
};
this.http.post('http://localhost:22222/school/getData', request, this.options)
.subscribe(
res => {
res = res.json();
const responseData = res;
console.log(responseData);
if (responseData.hasOwnProperty('data')) {
console.log('Data Fetched');
this.setResponse(responseData); // Setting response
this.setChartData(responseData); // setting data
this.setChartLabel(responseData); // setting label
this.router.navigate(['/gotoChartPage']); // navigating to next page chart.html
} else {
alert('Data Fetch Failed');
}
});
}

现在我的图表.html看起来像这里提到的

<div id='barDiv' class="onerow" *ngIf="1">
<h4 class="m-2">Bar Chart</h4>
<div style="display: block">
<canvas baseChart width="800" height="500"
[datasets]="barChartData" // --> This is where i want to update Data
[labels]="barChartLabels" // --> This is where i want to update Labels
[options]="barChartOptions"
[legend]="barChartLegend"
[chartType]="barChartType">
</canvas>
</div>      

那么我的图表组件如下

/*******************BAR CHART*********************************/
public barChartOptions: any = {
scaleShowVerticalLines: false,
responsive: true
};
public barChartLabels: Array<any> = []; // ["STD 1", "STD 2", "STD 3", "STD 4", "STD 5", "STD 6", "STD 7", "STD 8", "STD 9", "STD 10"]; Sample Data
public barChartType  = 'bar';
public barChartLegend  = true;
public barChartData: any[]  = []; // [ {'data': [40, 32, 42, 23, 43, 35, 50, 48, 37, 45], label: 'COUNT'}]; -- Sample Data
constructor(private global: GlobalService) {
this.barChartData =  this.global.chartData;
this.barChartLabels =  this.global.chartLabel;
}

我从 json 的回复是这样的格式：

对于单个数据集：

{
"data":
{"data": [40,32,42,23,43,35,50,48,37,45], "label":"COUNT"},
"label":
{"label":["STD 1","STD 2","STD 3","STD 4","STD 5","STD 6","STD 7","STD 8","STD 9","STD 10"]}
}

和

对于多个数据集：

{
"data":
{"data": [40,32,42,23,43,35,50,48,37,45], "label":"MVM"},
{"data": [04,03,02,03,03,05,50,80,07,45], "label":"HVD"},
{"data": [20,32,42,23,43,60,50,48,70,40], "label":"BMS"},
"label":
{"label":["STD 1","STD 2","STD 3","STD 4","STD 5","STD 6","STD 7","STD 8","STD 9","STD 10"]}
}

当我尝试以这种方式分配时，图表不会出现。但是，如果我对 barChartLabels 和 barChartData 中的值进行硬编码，则图表将显示。

我也用这种方式尝试过

`<canvas baseChart width="800" height="500"
[datasets]="global.chartData" // --> This is where I need to update Data
[labels]="global.chartLabel" // --> This is where I need to update Labels
[options]="barChartOptions"
[legend]="barChartLegend"
[chartType]="barChartType">
</canvas>`

感谢帮助。我被困在我大脑无法想象的更多。

我在堆栈上遇到了这个例子：CLICK和CLICK，但是，这不是正确的方法。

我想知道为什么数据没有像这样直接绑定到图表

[datasets]="global.chartData" // --> This is where I need to update Data
[labels]="global.chartLabel"

Answer 1

全局服务在chartData成员中保存当前数据集，并在组件的构造函数中读取该变量一次。但是，当数据更改时，全局服务中的chartData成员将被替换，但组件中的成员始终指向原始成员，因此您永远不会看到更改。

可以在全局服务中使用可观察流来通知客户端数据更改。