首先,在组件中定义一个数据数组,例如:
export class ChartComponent implements OnInit {
chartData: any[] = [
{
"country": "USA",
"visits": 3025
},
{
"country": "China",
"visits": 1882
},
{
"country": "Japan",
"visits": 1809
},
{
"country": "Germany",
"visits": 1322
},
{
"country": "UK",
"visits": 1122
},
{
"country": "France",
"visits": 1114
},
{
"country": "India",
"visits": 984
}
];
chart: am4charts.XYChart;
ngOnInit() {
this.createChart();
}
createChart() {
this.chart = am4core.create("chartdiv", am4charts.XYChart);
this.chart.data = this.chartData;
// chart code block...
}
然后在 AMCharts 代码块中使用该数组,例如:
createChart() {
this.chart = am4core.create("chartdiv", am4charts.XYChart);
this.chart.data = this.chartData;
let categoryAxis = this.chart.xAxes.push(new am4charts.CategoryAxis());
categoryAxis.dataFields.category = "country";
categoryAxis.renderer.grid.template.location = 0;
categoryAxis.renderer.minGridDistance = 30;
let valueAxis = this.chart.yAxes.push(new am4charts.ValueAxis());
let series = this.chart.series.push(new am4charts.ColumnSeries());
series.dataFields.valueY = "visits";
series.dataFields.categoryX = "country";
series.name = "Visits";
series.columns.template.tooltipText = "{categoryX}: [bold]{valueY}[/]";
series.columns.template.fillOpacity = .8;
// chart code block...
}
这样就能在 AMCharts 中成功使用数据数组了。