highcharts在Angular中的使用

1.使用NPM安裝angular2-highcharts

npn install angular-highcharts   --save

2. 主模塊中引入app.module.ts

...
import {ChartModule} from "angular2-highcharts";
...
imports: [
    ChartModule.forRoot(require('highchats')) //官網配置
]
bootstrap: [AppComponent]
...

3.中組件定義圖表配置數據，可在highcharts官網查看配置app.component.ts

官方網站：HTTPS：//www.npmjs.com/package/angular2-highcharts

GitHub上的：HTTPS：//github.com/gevgeny/angular2-highcharts

import {Component} from '@angular/core';
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html'
})
export class AppComponent {
  options:Object;
  constructor() {
    this.options = {
      chart: {
        plotBackgroundColor: null,
        plotBorderWidth: null,
        plotShadow: false,
        type: 'pie'
      },
      title: {
        text: 'Browser market shares at a specific website, 2014'
      },
      tooltip: {
        pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
      },
      plotOptions: {
        pie: {
          allowPointSelect: true,
          cursor: 'pointer',
          dataLabels: {
            enabled: true,
            format: '<b>{point.name}</b>: {point.percentage:.1f} %'
          }
        }
      },
      series: [{
        name: 'Brands',
        data: [
          { name: 'Microsoft Internet Explorer', y: 56.33 },
          { name: 'Chrome', y: 24.03 },
          { name: 'Firefox', y: 10.38 },
          { name: 'Safari', y: 4.77 },
          { name: 'Opera', y: 0.91 },
          { name: 'Proprietary or Undetectable', y: 0.2 }
        ]
      }]
    }
  }
}

4. 模板中加載圖像app.component.html

<chart [options] =“options”> </ chart>

適用於angualr / CLI或者的的WebPack的以上官網上面也是如此，在這裏我想表達的不只是複製粘貼，本人在angualr2項目中使用angualr2-highcharts時，按以上步驟但是出了錯誤，導致運行出錯，下面是我的解決辦法：

主模塊app.module.ts中改動：

...
import {ChartModule} from "angular2-highcharts";
...
imports: [
    ChartModule //修改後去掉forRoot(require('highchats')) 
]
bootstrap: [AppComponent]
...

組件app.component.ts改動：

import {Component} from '@angular/core';
import {HighchartsStatic} from 'angular2-highcharts/dist/HighchartsService';   //引入
declare var require: any;

export function highchartsFactory() {  //改動之處
  const hc = require('highcharts');
  const dd = require('highcharts/modules/drilldown');
  dd(hc);
  return hc;
}
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html'，
  providers: [{provide: HighchartsStatic, useFactory: highchartsFactory}]  //改動之處
})

export class AppComponent {
  options:Object;
  constructor() {
    this.options = {
      chart: {
        plotBackgroundColor: null,
        plotBorderWidth: null,
        plotShadow: false,
        type: 'pie'
      },
      title: {
        text: 'Browser market shares at a specific website, 2014'
      },
      tooltip: {
        pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
      },
      plotOptions: {
        pie: {
          allowPointSelect: true,
          cursor: 'pointer',
          dataLabels: {
            enabled: true,
            format: '<b>{point.name}</b>: {point.percentage:.1f} %'
          }
        }
      },
      series: [{
        name: 'Brands',
        data: [
          { name: 'Microsoft Internet Explorer', y: 56.33 },
          { name: 'Chrome', y: 24.03 },
          { name: 'Firefox', y: 10.38 },
          { name: 'Safari', y: 4.77 },
          { name: 'Opera', y: 0.91 },
          { name: 'Proprietary or Undetectable', y: 0.2 }
        ]
      }]
    }
  }
}

大概過程即是如此，至於選擇配置項，可以參考highcharts官方中文文檔：HTTP：//www.hcharts.cn，

    如果你有更好的見解，以及更好的圖表控件，請不吝賜教，謝謝！