Question

我是Angular 4的新手。

我尝试创建仪表板，哪些数据来自Http Post Response，我想使用数据制作图表（Highchart）。我成功地在console.log中接收响应并形成Highchart格式需要的数组。

app.component.ts

import { Component, OnInit } from '@angular/core';
import { HttpClient, HttpErrorResponse, HttpHeaders } from '@angular/common/http';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  //'use strict';
  title = 'app';


  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 datas: any[] = [];
           for (var i = 0; i < data['data'].length; i++) {
                datas.push(data['data'][i]['count']);
              }


    console.log(datas); 
},
        err => {
            console.log("Error occured");
        })
  }
}

app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { HttpClientModule } from '@angular/common/http';
//import { ChartModule } from 'angular-highcharts';

import { AppComponent } from './app.component';
import { DashboardComponent } from './dashboard/dashboard.component';

@NgModule({
  declarations: [
    AppComponent,
    DashboardComponent
  ],
  imports: [
    BrowserModule,
    HttpClientModule
    //ChartModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

的package.json

{
  "name": "dashboard",
  "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",
    "@types/jquery": "^3.2.12",
    "angular-highcharts": "^3.4.5",
    "angular2-highcharts": "^0.5.5",
    "core-js": "^2.4.1",
    "daterangepicker": "^2.1.25",
    "highcharts": "^5.0.14",
    "jquery": "^3.2.1",
    "leaflet": "^1.2.0",
    "moment": "^2.18.1",
    "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/jquery": "^3.2.12",
    "@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"
  }
}

我的问题是如何使用从console.log（数据）收到的数据？我想将此数据传递给.js文件或任何从console.log（数据）制作高图或图表的建议？

欢迎任何建议，谢谢..

Answer 1

     .subscribe(data => {
      let values  = [];
       for (var i = 0; i < data['data'].length; i++) {
            values.push(data['data'][i]['count']);
          }  
         let data = {
          chart: {
            type: 'column',
            options3d: {
              enabled: true,
              alpha: 12,
              beta: 0,
              depth: 50,
              viewDistance: 25
            }
          },
          credits: {
            'enabled': false
          },
          title: {
            text: 'Order Status for ' + currentyear,
            style: {
              fontSize: '8 px'
            }
          },
          xAxis: {
            gridLineWidth: 1,
            categories: data.monthdetails,
            crosshair: true,
            style: {
              fontSize: '12px'
            }
          },
          yAxis: {
            min: 0,
            minorTickInterval: 'auto',
            title: {
              text: 'Orders'
            }
           },

          legend: {
            enabled: true,
            labelFormatter: function () {
              return this.name.toString().substring(0, 2);
            },
          },
          plotOptions: {
            column: {
              stacking: 'normal',
            }
          },
          series: values
        }

}）

Angular 4 - 如何使用来自Http Post Response的数据到.js文件或高图？

1 个答案: