Angular2-highcharts在Angular 4项目中的可观察性
问题描述:
我想创建一个图表,使用来自http请求的observables工作,下面的代码正在处理一些假数据,我只想用来自后端的真实数据替换它们末端脚本这里是我的代码:Angular2-highcharts在Angular 4项目中的可观察性
我app.ts:
export class MyVerticalchartComponent {
@Input() showMePartially: boolean;
options: Object;
constructor(public userService3: UserService3) {
this.options = {
title : { text : '' },
chart: { type: 'area' },
legend: { enabled: false },
credits: { enabled: false },
xAxis: { type: 'datetime',
// startOnTick: true,
// endOnTick: true,
// tickInterval: 24 * 3600 * 1000,
},
dateTimeLabelFormats: {
second: '%H:%M:%S',
minute: '%H:%M:%S',
hour: '%H:%M:%S',
day: '%H:%M:%S',
week: '%H:%M:%S',
month: '%H:%M:%S',
year: '%H:%M:%S'
},
yAxis: { min: 0,
max: 100 },
plotOptions: {
series: {
// pointStart: 0,
color: '#648e59',
fillOpacity: 0.8,
fillColor: '#648e59'
}
},
series: [{
name: 'Someone1',
data: [], // res.json
}]
};
}
public ngOnInit() {
this.userService3.getData().subscribe((data) => {
this.options.series[0].data.operating_details = data;
console.log(data);
});
}}
我app.html:
<chart [options]="options">
<series>
</series>
</chart>
个
我的HTTP service.ts:
export interface User3 {
data: any;
}
const usersURL = 'http://my.super.backend.script.com';
@Injectable() 出口类UserService3 {
users3:可观察;
constructor (public http: Http) {
getData() {
const tick3$ = Observable.timer(100, 60000);
return tick3$.flatMap(() => this.http.get(usersURL)).map(res =>
res.json()).publishBehavior(<User3[]>[]).refCount();
}
}
的json的样子:
"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]]
答
通常在组件app.ts你,你将定义的服务文件的方法,设置了HTTP请求
getData(){
return this.http.get(usersUrl)
.map(res => res.json());
}
然后会赞成观察。
ngOnInit(){
this.userService3.getData().subscribe(
res => {
this.options.series[0].data = res; // set series data to options object
},
err => {
// error callback
}
}
很多很多感谢你我会尝试它! –
它doeasn't工作,对不起,我没有时间来测试它,但它看起来不错,所以在服务它很好,但在我的组件,当我尝试你的代码我编码错误:[ts]属性'订阅'不存在于类型'void'上。 任何 –
@EmileCantero听起来像你从组件调用的方法没有返回可观察对象。对不起,我意识到我在回答中忘记了回复声明。我会更新它 – LLai