amCharts 4:外部数据源

本文介绍了amCharts 4:外部数据源的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！ 问题描述

我正在努力使用外部数据源在amCharts 4中生成简单的XY水平条形图.

I'm struggling to generate a simple XY horizontal bar chart in amCharts 4 using an external data source.

一切都适用于静态数据(在这里我改编了amCharts文档中的图表演示之一).

Everything works fine with static data (where I adapted one of the chart demos from the amCharts documentation).

但是当我用外部dataSource URL替换静态数据时，将不会生成图表.

But when I replace the static data with the external dataSource URL, the chart won't generate.

我怀疑问题可能在于Airtable JSON输出与静态数据的结构不同.

I suspect that the problem might be the Airtable JSON output is a different structure to the static data.

但是，我对此怀疑可能是完全错误的，因此，我非常感谢您对解决方案的任何帮助.

However, I could be completely wrong on that suspicion, so I'd really appreciate any help to a solution please.

(我显然在以下代码中XXX列出了Airtable信息.)

(I've obviously XXX'd out the Airtable information in the code below.)

静态数据源

// Create chart instance var chart = am4core.create("CHARTDIV", am4charts.XYChart); // Add data chart.data = [{ "Name": "Brand Guidelines", "Aggregate Responses": 7 }, { "Name": "SAP", "Aggregate Responses": 3 }, { "Name": "Email", "Aggregate Responses": 5 }, { "Name": "Social Media", "Aggregate Responses": 3 }, { "Name": "Google Drive", "Aggregate Responses": 3 }, { "Name": "OneDrive", "Aggregate Responses": 4 }, { "Name": "SharePoint", "Aggregate Responses": 1 }, { "Name": "Slack", "Aggregate Responses": 3 }, { "Name": "Drupal", "Aggregate Responses": 2 }, { "Name": "Telephone", "Aggregate Responses": 3 }]; // Create axes var categoryAxis = chart.yAxes.push(new am4charts.CategoryAxis()); categoryAxis.dataFields.category = "Name"; categoryAxis.renderer.grid.template.location = 0; categoryAxis.renderer.minGridDistance = 30; var valueAxis = chart.xAxes.push(new am4charts.ValueAxis()); // Create series var series = chart.series.push(new am4charts.ColumnSeries()); series.dataFields.valueX = "Aggregate Responses"; series.dataFields.categoryY = "Name"; series.name = "Aggregate Responses"; series.columns.template.tooltipText = "{categoryY}: [bold]{valueX}[/]"; series.columns.template.fillOpacity = .8; var columnTemplate = series.columns.template; columnTemplate.strokeWidth = 2; columnTemplate.strokeOpacity = 1;

外部数据源

// Create chart instance var chart = am4core.create("CHARTDIV", am4charts.XYChart); // External data source chart.dataSource.url = "api.airtable/v0/appXXXXXXX/airtable-table-name?api_key=keyXXXXXXX"; // Create axes var categoryAxis = chart.yAxes.push(new am4charts.CategoryAxis()); categoryAxis.dataFields.category = "Name"; categoryAxis.renderer.grid.template.location = 0; categoryAxis.renderer.minGridDistance = 30; var valueAxis = chart.xAxes.push(new am4charts.ValueAxis()); // Create series var series = chart.series.push(new am4charts.ColumnSeries()); series.dataFields.valueX = "Aggregate Responses"; series.dataFields.categoryY = "Name"; series.name = "Aggregate Responses"; series.columns.template.tooltipText = "{categoryY}: [bold]{valueX}[/]"; series.columns.template.fillOpacity = .8; var columnTemplate = series.columns.template; columnTemplate.strokeWidth = 2; columnTemplate.strokeOpacity = 1;

空中JSON输出

{ "records": [ { "id": "recXXXXXX", "fields": { "Name": "EpiServer", "Typeform Responses": [ "recXXXXXX", "recXXXXXX", "recXXXXXX" ], "Aggregate Responses": 3 }, "createdTime": "2020-05-22T16:11:01.000Z" }, { "id": "recXXXXXX", "fields": { "Name": "OneDrive", "Typeform Responses": [ "recXXXXXX", "recXXXXXX", "recXXXXXX", "recXXXXXX" ], "Aggregate Responses": 4 }, "createdTime": "2020-05-22T16:50:41.000Z" }, ] }

推荐答案

您对格式不同的怀疑是正确的. AmCharts需要一个简单，扁平的对象数组，在其中可以找到您指定的字段，因此您需要将外部数据转换为AmCharts可以接受的格式.您可以使用parseended事件来重新映射数据，如下所示:

Your suspicion about the format being different is the right one. AmCharts needs a simple, flattened array of objects where it can find the fields you've specified, so you'll need to convert your external data into a format that AmCharts can accept. You can use the parseended event to re-map your data like so:

chart.dataSource.events.on("parseended", function(ev) { // parsed data is assigned to data source's `data` property // pluck data from the records array in your raw data ev.target.data = ev.target.data.records.map(function(dataItem) { return { "Aggregate Responses": dataItem.fields["Aggregate Responses"], "Name": dataItem.fields.Name } }); });

下面的示例以您的代码和示例数据的base64编码数据URL为例进行演示:

Example below using your code and a base64 encoded data URL of your sample data as demonstration:

// Create chart instance var chart = am4core.create("CHARTDIV", am4charts.XYChart); // External data source //chart.dataSource.url = "api.airtable/v0/appXXXXXXX/airtable-table-name?api_key=keyXXXXXXX"; chart.dataSource.url = dataURI(); //fake URL for demonstration purposes chart.dataSource.events.on("parseended", function(ev) { // parsed data is assigned to data source's `data` property ev.target.data = ev.target.data.records.map(function(dataItem) { return { "Aggregate Responses": dataItem.fields["Aggregate Responses"], "Name": dataItem.fields.Name } }); }); // Create axes var categoryAxis = chart.yAxes.push(new am4charts.CategoryAxis()); categoryAxis.dataFields.category = "Name"; categoryAxis.renderer.grid.template.location = 0; categoryAxis.renderer.minGridDistance = 30; var valueAxis = chart.xAxes.push(new am4charts.ValueAxis()); // Create series var series = chart.series.push(new am4charts.ColumnSeries()); series.dataFields.valueX = "Aggregate Responses"; series.dataFields.categoryY = "Name"; series.name = "Aggregate Responses"; series.columns.template.tooltipText = "{categoryY}: [bold]{valueX}[/]"; series.columns.template.fillOpacity = .8; var columnTemplate = series.columns.template; columnTemplate.strokeWidth = 2; columnTemplate.strokeOpacity = 1; // base64 encoded version of sample data as a data URI function dataURI() { return "data:application/json;base64,eyAicmVjb3JkcyI6IFsgeyAiaWQiOiAicmVjWFhYWFhYIiwgImZpZWxkcyI6IHsgIk5hbWUiOiAiRXBpU2VydmVyIiwgIlR5cGVmb3JtIFJlc3BvbnNlcyI6IFsgInJlY1hYWFhYWCIsICJyZWNYWFhYWFgiLCAicmVjWFhYWFhYIiBdLCAiQWdncmVnYXRlIFJlc3BvbnNlcyI6IDMgfSwgImNyZWF0ZWRUaW1lIjogIjIwMjAtMDUtMjJUMTY6MTE6MDEuMDAwWiIgfSwgeyAiaWQiOiAicmVjWFhYWFhYIiwgImZpZWxkcyI6IHsgIk5hbWUiOiAiT25lRHJpdmUiLCAiVHlwZWZvcm0gUmVzcG9uc2VzIjogWyAicmVjWFhYWFhYIiwgInJlY1hYWFhYWCIsICJyZWNYWFhYWFgiLCAicmVjWFhYWFhYIiBdLCAiQWdncmVnYXRlIFJlc3BvbnNlcyI6IDQgfSwgImNyZWF0ZWRUaW1lIjogIjIwMjAtMDUtMjJUMTY6NTA6NDEuMDAwWiIgfSBdIH0="; }

<script src="//www.amcharts/lib/4/core.js"></script> <script src="//www.amcharts/lib/4/charts.js"></script> <div id="CHARTDIV" style="width: 100%; height: 98vh"></div>

请确保您的数据是有效的JSON，因为您的示例的尾随逗号不正确.

Make sure your data is valid JSON as your sample has an incorrect trailing comma.