angular2集成highchart

集成highchart的配置困扰了我很久，今天终于解决了：

1.修改tsconfig.app.json:

"compilerOptions": {

//...

"types": ["node"]

//...

}

2.安装angular2-highcharts库：

npm install angular2-highcharts --save

3.module中引入highchart

 

import { BrowserModule } from '@angular/platform-browser';

import { NgModule } from '@angular/core';

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

import {ChartModule} from "angular2-highcharts";

import * as highcharts from 'highcharts';

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;

}

@NgModule({

declarations: [

AppComponent

],

imports: [

BrowserModule,

ChartModule

],

providers: [{

provide: HighchartsStatic,

useFactory: highchartsFactory

}],

bootstrap: [AppComponent]

})

export class AppModule { }

4.使用highchart:

4.1 app.component.html:

<chart [options]="options"></chart>

 

4.2 app.component.ts:

export class AppComponent {

title = 'app';

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 }

]

}]

}

}

}