集成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 } ] }] } } } ?

轉載于:https://www.cnblogs.com/ihzeng/p/8859300.html

總結

以上是生活随笔為你收集整理的angular2集成highchart的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。