在Angular 4中动态填充ng2图表 [英] Dynamically Populate ng2 chart in Angular 4
问题描述
我已经编写了一个示例应用程序，以json格式从服务中获取数据并将其绑定到UI上的图表.
I have written a sample application to fetch data from service in json format and bind it to the chart on UI.
问题是，无论何时我尝试绑定数据，都没有.我尝试了多种方式来绑定数据，但未成功.
The problem is when ever I try to bind the data, it doesn't. I tried in many ways to bind data but was unsuccessfull.
功能如下: 第1页:包含2个下拉菜单.图表类型& 1第二，样品类型. 在选择两个下拉值后，我单击一个按钮，该按钮会触发GlobalService中的函数fetchData().
Functionality is as follows: Page 1: contains 2 dropdowns. 1 with Chart Type & 2nd with Sample Type. On selection of both dropdown values, I click on a button which triggers a function fetchData() in GlobalService.
下面是吸气剂& GlobalService中的二传手
Below is getter & setter in GlobalService
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');
}
});
}
现在，我的chart.html就像此处
Now my chart.html looks like this as mentioned in here
<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>
然后我的Chart.component如下
Then my Chart.component is as follows
/*******************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的回复采用以下格式:
My response from json comes in this format:
对于单个数据集:
{
"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图表显示.
When I try to assign in this way, the chart doesn't come up. But if I hardcode the values in the barChartLabels & barChartData the Charts displays.
我也以此方式尝试过
`<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>`
感谢您的帮助.我对这个问题的了解超出了我的大脑所能想到的.
Help is appreciated. I am stuck with this from more than my brain can think of.
我在堆栈上遇到了这个示例:点击& 点击，但这不是正确的方法.
I came across this example on stack : CLICK & CLICK But, its not the correct way to do.
我想知道为什么数据没有像这样直接绑定到图表上
I am wondering why the data doesn't get bind to the charts like this directly
[datasets]="global.chartData" // --> This is where I need to update Data
[labels]="global.chartLabel"
推荐答案
您的全局服务将当前数据集保存在chartData成员中，并且您在组件的构造函数中读取了该变量一次.但是，当数据更改时，将替换全局服务中的chartData成员，但是组件中的成员始终指向原始成员，因此您永远不会看到更改.
Your global service holds the current data sets in the chartData member, and you read that variable once in your component's constructor. However when the data changes, the chartData member in your global service is replaced, but the one in your component keeps pointing to the original, so you never see a change.
您可以在全局服务中使用可观察的流，以将数据更改通知客户端.
You could use an observable stream in your global service to notify clients of change in data.
这篇关于在Angular 4中动态填充ng2图表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
