角4個不能從使用HTTP POST響應數據highchart

Question

我試圖把我的數據從響應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": "" 
} 

這是代碼。 我試圖做一些簡單的顯示Highchart使用來自Http Post Response的數據，爲什麼它不工作？有什麼我失蹤？

現在highchart的佈局已經顯示，但是值不是。如何顯示價值？

Highchart show but not the value (Check the picture here)

Answer 1

您需要聲明訂閱功能之外圖表變量：

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 
       }] 
       });