Angular Highcharts 和 Highcharts Angular 是两个不同的库,用于在 Angular 应用中集成 Highcharts 图表库。
安装方法:
npm install angular-highcharts --save
使用方法:
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { ChartModule } from 'angular-highcharts';
import { AppComponent } from './app.component';
@NgModule({
declarations: [AppComponent],
imports: [BrowserModule, ChartModule],
bootstrap: [AppComponent]
})
export class AppModule { }
示例代码:
import { Component } from '@angular/core';
import { Chart } from 'angular-highcharts';
@Component({
selector: 'app-root',
template: ''
})
export class AppComponent {
chart = new Chart({
chart: {
type: 'column'
},
title: {
text: 'Angular Highcharts Example'
},
series: [{
name: 'Data',
data: [1, 2, 3, 4, 5]
}]
});
}
安装方法:
npm install highcharts-angular --save
使用方法:
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { HighchartsChartModule } from 'highcharts-angular';
import { AppComponent } from './app.component';
@NgModule({
declarations: [AppComponent],
imports: [BrowserModule, HighchartsChartModule],
bootstrap: [AppComponent]
})
export class AppModule { }
示例代码:
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
template: ' '
})
export class AppComponent {
chartOptions = {
chart: {
type: 'column'
},
title: {
text: 'Highcharts Angular Example'
},
series: [{
name: 'Data',
data: [1, 2, 3, 4, 5]
}]
};
}
总结: 总的来说,Angular Highcharts 和 Highcharts Angular 都是为了在 Angular 应用中集成 Highcharts 图表库。它们的主要区别在于提供方式和使用方法上的差异,但最终都可以实现在 Angular 应用中使用 Highcharts。
上一篇:Angular-Highcharts: 在更改plotOptions后快速重新绘制图表
下一篇:Angular-HighCharts中的ChartModule和HighchartsChartModule之间的区别是什么?