我试图将我的数据从响应Http Post放到Highchart中的数据系列中，这就是我想要做的......
simplechart.component.ts：
import { Component, OnInit } from '@angular/core';
//import { ChartModule } from 'angular-highcharts';
import { Chart } from 'angular-highcharts';
import { HttpClient, HttpErrorResponse, HttpHeaders } from '@angular/common/http';
interface UserResponse {
login: string,
bio: string,
company: string
}
@Component({
selector: 'app-simplechart',
templateUrl: './simplechart.component.html',
styleUrls: ['./simplechart.component.css']
})
export class SimplechartComponent implements OnInit {
// chart = new Chart({
// chart: {
// type: 'line'
// },
// title: {
// text: 'Linechart'
// },
// credits: {
// enabled: false
// },
// series: [{
// name: 'Line 1',
// data: [10, 20, 30,40,50]
// }]
// });
//
// add() {
// this.chart.addPoint(Math.floor(Math.random() * 10));
// }
constructor(private http: HttpClient) {
}
ngOnInit() :void{
this.http.get<UserResponse>('https://api.github.com/users/seeschweiler').subscribe(
data => {
console.log("User Login: " +data.login);
console.log("Bio: " +data.bio);
console.log("Company: " +data.company);
},
(err: HttpErrorResponse) => {
if (err.error instanceof Error){
console.log("Client-side Error occured");
} else {
console.log("Server-side Error occured");
}
})
const body = {};
const req = this.http.post('http://127.0.0.1:5004/meta/pushnotiflogevent',body,{
headers: new HttpHeaders().set('Content-Type', 'application/json')
})
.subscribe(data => {
var chart: any;
//var datas: any[] = [];
var appid: any[] = [];
for (var i = 0; i < data['data'].length; i++) {
datas.push(data['data'][i]['count']);
}
for (var i = 0; i < data['data'].length; i++) {
appid.push(data['data'][i]['application_id']);
}
chart = new Chart({
chart: {
type: 'line'
},
title: {
text: 'Linechart'
},
credits: {
enabled: false
},
series: [{
name: 'appid',
data: datas
//data : (
// function () {
// var data: any[] = [];
// for (var i = 0; i < data['data'].length; i++) {
// data.push(data['data'][i]['application_id']);
// }
// return data;
// }
//)
}]
});
// add() {
// this.chart.addPoint(Math.floor(Math.random() * 10));
// }
console.log(datas);
console.log(appid);
},
err => {
console.log("Error occured");
})
}
}
simplechart.component.html：
<div [chart]="chart"></div>
app.module.ts：
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { ChartModule } from 'angular-highcharts';
import { AppComponent } from './app.component';
import { SimplechartComponent } from './components/chart-demo/simplechart/simplechart.component';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { HttpClientModule } from '@angular/common/http';
@NgModule({
declarations: [
AppComponent,
SimplechartComponent
],
imports: [
BrowserModule,
ChartModule,
HttpClientModule,
BrowserAnimationsModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
app.component.ts：
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
title = 'app';
}
的package.json：
{
"name": "charts",
"version": "0.0.0",
"license": "MIT",
"scripts": {
"ng": "ng",
"start": "ng serve",
"build": "ng build",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e"
},
"private": true,
"dependencies": {
"@angular/animations": "^4.2.4",
"@angular/common": "^4.2.4",
"@angular/compiler": "^4.2.4",
"@angular/core": "^4.2.4",
"@angular/forms": "^4.2.4",
"@angular/http": "^4.2.4",
"@angular/platform-browser": "^4.2.4",
"@angular/platform-browser-dynamic": "^4.2.4",
"@angular/router": "^4.2.4",
"angular-highcharts": "^3.4.5",
"core-js": "^2.4.1",
"highcharts": "^5.0.14",
"rxjs": "^5.4.2",
"zone.js": "^0.8.14"
},
"devDependencies": {
"@angular/cli": "1.3.0",
"@angular/compiler-cli": "^4.2.4",
"@angular/language-service": "^4.2.4",
"@types/highcharts": "^5.0.4",
"@types/jasmine": "~2.5.53",
"@types/jasminewd2": "~2.0.2",
"@types/node": "~6.0.60",
"codelyzer": "~3.1.1",
"jasmine-core": "~2.6.2",
"jasmine-spec-reporter": "~4.1.0",
"karma": "~1.7.0",
"karma-chrome-launcher": "~2.1.1",
"karma-cli": "~1.0.1",
"karma-coverage-istanbul-reporter": "^1.2.1",
"karma-jasmine": "~1.1.0",
"karma-jasmine-html-reporter": "^0.2.2",
"protractor": "~5.1.2",
"ts-node": "~3.2.0",
"tslint": "~5.3.2",
"typescript": "~2.3.3"
},
"description": "This project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 1.3.0.",
"main": "karma.conf.js",
"author": ""
}
这就是代码。 我正在尝试使用来自Http Post Response的数据做一些简单的显示Highchart，为什么它不起作用？有什么我想念的吗？
现在高清图的布局已经显示，但值不是。如何显示价值？
答案 0 :(得分：0)
您需要在subscribe函数之外声明图表变量：
export class SimplechartComponent implements OnInit {
chart:any; //need to declare it here first so you can use it in your template
/...
//in your subscribe function fill your chart variable without redeclaring it.
/...
var datas:any[]=[];
for (var i = 0; i < data['data'].length; i++) {
datas.push(+data['data'][i]['count']);
}
/...
this.chart = new Chart({
chart: {
type: 'line'
},
title: {
text: 'Linechart'
},
credits: {
enabled: false
},
xAxis: {
categories: appid
},
series: [{
name: 'appid',
data: datas //the array used in your code
}]
});