Angular 4 中带有订阅方法的饼图
Pie chart with subcribe method in Angular 4
遇到了一个很小的问题,但我想不通,我正在尝试使用 angular2-highchart、rxjs 和 Angular 4 这是我的代码(我认为这是一个格式问题,因为当我用 "operating_details" 这样做时它就起作用了):
pieChart.ts:
import { Component, OnInit, Input, OnDestroy } from '@angular/core';
import { UserService3 } from '../user3.service';
import { Observable } from 'rxjs/Observable';
import { Subscription } from 'rxjs/Subscription';
@Component({
selector: 'my-daydetail',
templateUrl: './my-daydetail.component.html',
styleUrls: ['./my-daydetail.component.css']
})
export class MyDaydetailComponent implements OnDestroy, OnInit {
// Içi je crée un un import depuis le composent appliV2.html
@Input() showMePartially: boolean;
options: any;
data: Object[];
chart: any;
// Ici j'importe la variable Subscription de l'api Rxjs que je stock dans une variable
dataSubscription: Subscription;
constructor(public userService3: UserService3) {
this.options = {
chart: { type: 'pie',
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: false, },
// legend: { enabled: false },
credits: { enabled: false },
tooltip: {
// pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
},
plotOptions: {
pie: {
allowPointSelect: false,
cursor: 'pointer',
dataLabels: {
enabled: false,
// format: '<b>{point.name}</b>: {point.percentage:.1f} %',
}
}
},
series: [{
name: 'Dispo',
data: []
}]
};
}
saveInstance(chartInstance) {
this.chart = chartInstance;
// console.log(chartInstance);
}
public ngOnInit () {
this.dataSubscription =
this.userService3.getData().subscribe((data) => {
this.options.series[0].data = data.data.operating_rate;
console.log(data);
});
}
public ngOnDestroy() {
if (this.dataSubscription){
this.dataSubscription.unsubscribe();
}
}
}
pieChart.html:
<chart [options]="options" (load)="saveInstance($event.context)">
我的一部分 Json:
{"status":"OK","data":
{"operating_rate":88.14,"operating_duration":"20h02mn",
“unoperating_durati
在“:”2h40mn“,"operating_details":[[1497837618,0],[1497837738,0],
[1497837858,0],[1497837978,0],[1497838098,0],[1497838218,0],
[1497838338,0],[1497838458,0],[1497838578,0],[1497838698,0],
[1497838818,0],[1497838938,0],[1497839058,0],[1497839178,0],
[1497839298,0],[1497839418,0],[1497839538,0],[1497839658,0],
[1497839778,0],[1497839898,0],[1497840018,0]]}
这是我的 service.ts:
getData() {
const tick3$ = Observable.timer(100, 60000);
return tick3$.flatMap(() => this.http.get(usersURL)).map(res =>
res.json()); // .publishBehavior(<User3[]>[]).refCount();
}
我相信你想要的是
// series data of your highcharts options
this.options.series[0].data = [
{
name: 'Operating Duration',
y: data.data.operating_rate // this is the response from your json call
},
{
name: 'Non-Operating Duration',
y: 100 - data.data.operating_rate
}
];
根据 highcharts 文档http://jsfiddle.net/gh/get/library/pure/highcharts/highcharts/tree/master/samples/highcharts/demo/pie-basic/
遇到了一个很小的问题,但我想不通,我正在尝试使用 angular2-highchart、rxjs 和 Angular 4 这是我的代码(我认为这是一个格式问题,因为当我用 "operating_details" 这样做时它就起作用了):
pieChart.ts:
import { Component, OnInit, Input, OnDestroy } from '@angular/core';
import { UserService3 } from '../user3.service';
import { Observable } from 'rxjs/Observable';
import { Subscription } from 'rxjs/Subscription';
@Component({
selector: 'my-daydetail',
templateUrl: './my-daydetail.component.html',
styleUrls: ['./my-daydetail.component.css']
})
export class MyDaydetailComponent implements OnDestroy, OnInit {
// Içi je crée un un import depuis le composent appliV2.html
@Input() showMePartially: boolean;
options: any;
data: Object[];
chart: any;
// Ici j'importe la variable Subscription de l'api Rxjs que je stock dans une variable
dataSubscription: Subscription;
constructor(public userService3: UserService3) {
this.options = {
chart: { type: 'pie',
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: false, },
// legend: { enabled: false },
credits: { enabled: false },
tooltip: {
// pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
},
plotOptions: {
pie: {
allowPointSelect: false,
cursor: 'pointer',
dataLabels: {
enabled: false,
// format: '<b>{point.name}</b>: {point.percentage:.1f} %',
}
}
},
series: [{
name: 'Dispo',
data: []
}]
};
}
saveInstance(chartInstance) {
this.chart = chartInstance;
// console.log(chartInstance);
}
public ngOnInit () {
this.dataSubscription =
this.userService3.getData().subscribe((data) => {
this.options.series[0].data = data.data.operating_rate;
console.log(data);
});
}
public ngOnDestroy() {
if (this.dataSubscription){
this.dataSubscription.unsubscribe();
}
}
}
pieChart.html:
<chart [options]="options" (load)="saveInstance($event.context)">
我的一部分 Json: {"status":"OK","data": {"operating_rate":88.14,"operating_duration":"20h02mn", “unoperating_durati 在“:”2h40mn“,"operating_details":[[1497837618,0],[1497837738,0], [1497837858,0],[1497837978,0],[1497838098,0],[1497838218,0], [1497838338,0],[1497838458,0],[1497838578,0],[1497838698,0], [1497838818,0],[1497838938,0],[1497839058,0],[1497839178,0], [1497839298,0],[1497839418,0],[1497839538,0],[1497839658,0], [1497839778,0],[1497839898,0],[1497840018,0]]}
这是我的 service.ts:
getData() {
const tick3$ = Observable.timer(100, 60000);
return tick3$.flatMap(() => this.http.get(usersURL)).map(res =>
res.json()); // .publishBehavior(<User3[]>[]).refCount();
}
我相信你想要的是
// series data of your highcharts options
this.options.series[0].data = [
{
name: 'Operating Duration',
y: data.data.operating_rate // this is the response from your json call
},
{
name: 'Non-Operating Duration',
y: 100 - data.data.operating_rate
}
];
根据 highcharts 文档http://jsfiddle.net/gh/get/library/pure/highcharts/highcharts/tree/master/samples/highcharts/demo/pie-basic/