Amcharts V3 的官方角插件
安装
-
如果您使用角 12 或更高 :
npm install @amcharts/amcharts3-angular --save -
如果您使用角5到11:
npm install @amcharts/amcharts3-angular^2.2.5 --save -
如果你在使用角2到4:
npm install @amcharts/amcharts3-angular@^1.5.0 --save
如何使用
- 在你身边
index.html文件,使用<script>标记 :
<script src="https://www.amcharts.com/lib/3/amcharts.js"></script>
<script src="https://www.amcharts.com/lib/3/serial.js"></script>
<script src="https://www.amcharts.com/lib/3/themes/light.js"></script>
如果你使用股票图表,你应该使用这些 <script> 标记代替 :
<script src="https://www.amcharts.com/lib/3/amcharts.js"></script>
<script src="https://www.amcharts.com/lib/3/serial.js"></script>
<script src="https://www.amcharts.com/lib/3/amstock.js"></script>
<script src="https://www.amcharts.com/lib/3/themes/light.js"></script>
如果你使用地图,你应该使用这些 <script> 标记代替 :
<script src="https://www.amcharts.com/lib/3/ammap.js"></script>
<script src="https://www.amcharts.com/lib/3/maps/js/worldLow.js"></script>
<script src="https://www.amcharts.com/lib/3/themes/light.js"></script>
如果您使用其他图表类型, 您应该更改 serial.js 到您使用的图表类型 :
<script src="https://www.amcharts.com/lib/3/amcharts.js"></script>
<script src="https://www.amcharts.com/lib/3/pie.js"></script>
<script src="https://www.amcharts.com/lib/3/themes/light.js"></script>
- 在您的应用程序组件中,导入
AmChartsModule模块并添加到imports数字 :
import { Component } from '@angular/core';
import { CommonModule } from '@angular/common';
import { RouterOutlet } from '@angular/router';
import { AmChart, AmChartsService, AmChartsModule } from '@amcharts/amcharts3-angular';
@Component({
selector: 'app-root',
standalone: true,
// Add the import here
imports: [CommonModule, RouterOutlet, AmChartsModule],
templateUrl: './app.component.html',
styleUrl: './app.component.css'
})
export class AppComponent {
- 输入
AmChartsService,创建<div>元素,带有id,然后使用makeChart创建图表的方法 :
<div id="chartdiv" [style.width.%]="100" [style.height.px]="500"></div>
import { Component } from '@angular/core';
import { CommonModule } from '@angular/common';
import { RouterOutlet } from '@angular/router';
import { AmChart, AmChartsService, AmChartsModule } from '@amcharts/amcharts3-angular';
@Component({
selector: 'app-root',
standalone: true,
// Add the import here
imports: [CommonModule, RouterOutlet, AmChartsModule],
templateUrl: './app.component.html',
styleUrl: './app.component.css'
})
export class AppComponent {
private chart: AmChart | undefined;
// Inject the service here
constructor(private AmCharts: AmChartsService) {}
ngAfterViewInit() {
this.chart = this.AmCharts.makeChart("chartdiv", {
"type": "serial",
"theme": "light",
"dataProvider": []
...
});
}
ngOnDestroy() {
if (this.chart) {
this.AmCharts.destroyChart(this.chart);
}
}
}
第一条理由 makeChart 一定和我们一样 <div>是因为 id编辑 id 可以是任意的,但如果显示多个图表,每个图表必须有一个不同的 id
完成图表后,必须拨打 destroyChart 方法。 把这个放进去就好了 ngOnDestroy 方法.
- 如果您要在图表创建后更改图表, 您必须使用
updateChart方法 :
// This must be called when making any changes to the chart
this.AmCharts.updateChart(this.chart, () => {
// Change whatever properties you want
this.chart.dataProvider = [];
});
- 如果您想要添加事件听众, 请使用
addListener方法 :
this.AmCharts.addListener(this.chart, "init", (e) => {
// Do stuff when the event happens
});
这个 addListener 方法返回一个函数,如果您想要停止对事件的监听,可以调用该函数:
const stop = this.AmCharts.addListener(this.chart, "init", (e) => {
// Do stuff when the event happens
});
// Call the stop function when you want to stop listening to the event
stop();
- 而不是使用
AmChartsService您可以使用<amCharts>在模板中标记 :
@Component({
template: `<amCharts id="chartdiv" [options]="options" [style.width.%]="100" [style.height.px]="500"></amCharts>`
})
export class AppComponent {
public options = {
"type": "serial",
"theme": "light",
"dataProvider": []
...
};
}
这比使用 AmChartsService,但你不能打电话 AmCharts 方法,而且很难改变图表选项,因此对于不改变的图表,它最有效.
你可以看到一些例子 examples 目录.
更改日志
3.0.8 (简体中文)
- 增加支持角20和21
3.0.7 (中文(简体) )
- 添加支持角19
3.0.6 (中文(简体) )
- 添加支持角 18
3.0.5 (中文(简体) )
- 添加支持角 17
3.0.4 (中文(简体) )
- 增加支持角16
3.0.3 信息技术
- 添加支持角 15
3.0.2 国家
- 添加支持角14
3.0.1 (中文(简体) )
- 添加支持角13
3.0.0 (单位:千美元)
- 添加支持Angular 12 Ivy
2.2.5 国家
- 升级为角 9 - 12
2.2.4 国家
- 升级到角 8
2.2.3 国家
- 升级到角7
2.2.1 联合国
- 正在添加
StockEvent财务报告和审定财务报表StockLegend动态添加股票事件/列车的构造器.
2.2.0 (中文(简体) )
- 正在添加
StockPanel财务报告和审定财务报表StockGraph动态地添加股票面板/图的构造器.
2.1.0 国家
- 正在添加
addInitHandler, (中文(简体) ),addPrefix, (中文(简体) ),clear, (中文(简体) ),formatDate, (中文(简体) ),formatNumber,以及stringToDate方法AmChartsService
2.0.0 (韩语)
- 升级到角 5
- 删除快速启动种子示例
1.5.0 (中文(简体) )
- 正在添加
addListener方法
1.4.0 (中文(简体) )
- 取消折旧
AmChartsDirective - 正在添加
delay选项AmChartsDirective
1.3.0 (单位:千美元)
- 在所有全球增加
AmCharts属性AmChartsService
1.2.1 国家
- 更新到 Angular 编译器的最新版本
1.2.0 (中文(简体) )
- 添加支持角4
- 折旧
<amCharts>用于支持新的AmChartsService
1.1.0 国家
- 各种修正
- 添加示例
1.0.0 (单位:千美元)
- 初步释放