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

【问题标题】：AmCharts with Angular 9: load csv data, chart is blank带有 Angular 9 的 AmCharts：加载 csv 数据，图表为空白
【发布时间】：2020-08-31 17:47:25
【问题描述】：

我正在使用 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();

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

我错过了什么吗？

【问题讨论】：

您的 PieSeries 对象在哪里？你定义了一个吗？
我真的没有定义一个。据我在 AmChart 文档中所读到的，我认为图表会从数据中推断出系列。 AmChart 文档站点确实缺少完整的示例。
不，它不会从数据中推断出系列，您需要定义一个。饼图文档页面上有完整的section that explains how series objects work on the documentation site 和plenty of full pie chart examples。
是的！添加系列使其工作。谢谢！！！
请您添加您的评论作为答案，因为它确实解决了问题！我要投票！！！谢谢！

标签： angular csv amcharts

【解决方案1】：

定义图表对象和数据源 URL 是不够的。每种图表类型都需要定义一个 series object 来定义更多特征，包括从中提取数据的字段。

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

【讨论】：