要解决AmCharts与Angular 9加载CSV数据时图表为空的问题,您可以按照以下步骤进行操作:
npm install @amcharts/amcharts4 --save
import * as am4core from '@amcharts/amcharts4/core';
import * as am4charts from '@amcharts/amcharts4/charts';
import am4themes_animated from '@amcharts/amcharts4/themes/animated';
ngOnInit() {
// 加载CSV数据
this.loadCSVData().subscribe(data => {
// 绘制图表
this.drawChart(data);
});
}
// 加载CSV数据的函数
loadCSVData(): Observable {
return new Observable(observer => {
// 使用Angular的HttpClient来加载CSV文件
this.http.get('path/to/your/csv/file.csv', { responseType: 'text' })
.subscribe(csvData => {
// 将CSV数据转换为JSON格式
const jsonArray = this.csvJSON(csvData);
observer.next(jsonArray);
observer.complete();
});
});
}
// 将CSV数据转换为JSON格式的函数
csvJSON(csvData: string): any[] {
const lines = csvData.split('\n');
const result = [];
const headers = lines[0].split(',');
for (let i = 1; i < lines.length; i++) {
const obj = {};
const currentLine = lines[i].split(',');
for (let j = 0; j < headers.length; j++) {
obj[headers[j]] = currentLine[j];
}
result.push(obj);
}
return result;
}
// 绘制图表的函数
drawChart(data: any[]): void {
// 创建图表实例
const chart = am4core.create('chartdiv', am4charts.XYChart);
chart.data = data;
// 绘制图表
// ...
// 销毁图表实例
this.ngOnDestroy() {
chart.dispose();
}
}
通过按照上述步骤进行操作,您应该能够正确加载CSV数据并绘制AmCharts图表。请确保替换代码示例中的路径和数据处理逻辑以适应您的具体情况。