时间戳

首页 > 解决方案 > 带有 Angular 9 的 AmCharts：加载 csv 数据，图表为空白

angular - 带有 Angular 9 的 AmCharts：加载 csv 数据，图表为空白

问题描述

我将 Angular 9 与 AmCharts 4 一起使用。

我需要将 CSV 数据加载到饼图中。数据如下：

Operation Type, Quantity
Internal, 687
External, 456

图表声明为：

ngAfterViewInit() {
    this.chart = am4core.create(this.getChartID(), am4charts.PieChart);

    const subtitulo = this.chart.titles.create();
    subtitulo.text = this.subtitulo;
    subtitulo.fontSize = 10;

    const titulo = this.chart.titles.create();
    titulo.text = this.titulo;
    titulo.fontSize = 15;
    titulo.marginTop = 10;
}

该数据来自一个 servlet（是的，所有的 CORS 都通过了）。我可以确认数据已加载（我可以正确看到“chart.data”值），但数据加载后未绘制它自己的图表。

我用来加载数据的代码是：

this.chart.dataSource.url = 'https://myserver.com/ng/DataService/?param1=342&param2=filterN&format=csv';

const csvParser = new am4core.CSVParser();
csvParser.options.useColumnNames = true;
this.chart.dataSource.parser = csvParser;
this.chart.dataSource.events.on('error', (error) => { console.log('Datasource error: ', error); });

this.chart.dataSource.load();

图表正在创建中执行“加载”后，我可以在“开发人员工具”中看到数据已正确加载，但图表仍然为空。

我错过了什么吗？

标签： angularcsvamcharts

解决方案

定义图表对象和数据源 URL 是不够的。每种图表类型都需要定义一个系列对象，以定义进一步的特征，包括从中提取数据的字段。

var pieSeries = this.chart.series.push(new am4charts.PieSeries());
pieSeries.dataFields.value = "Quantity";
pieSeries.dataFields.category = "Operation Type";

推荐阅读