XY 图表使用数据源动态排列系列

Question

我正在使用 amcharts4 显示一些图表，使用 vanilla javascript 和 .Net Core API 来获取数据（json 格式）。

我需要创建一个带有类别 X 轴（时间）和值 Y 轴（温度）的折线图（XY 图表）。 图表必须包含动态系列（我不知道高级会有多少系列）并使用 dataSource 获取数据。

我找不到让它工作的方法。

我已经阅读了所有相关的文档、指南和示例： - List templates - Adapters - XY-charts - DataSource - Dynamically adding and removing series - Line series - Series

在这里，我只找到了这个Stacked Area Amchart passing dynamic data（我能找到的所有其他帖子都不是关于 amcharts4）。但我既需要使用 dataSource 来获取数据，又需要同时动态添加系列。

我可以修改API来改变json数据结构。 我正在使用 javascript 方式来定义图表和系列。

我已经尝试在 datasource 加载数据时添加一个事件（“load”事件），并在该函数中解析图表的数据，分开在不同的数组中，为每个系列制作包含所有对（值、时间戳）的 json，然后动态创建系列。但它不起作用，该系列的 Legend 正确加载但数据从未出现。 我还设置了 datasource 的错误事件，但没有出现错误（在浏览器控制台中也是如此）。

我找不到使用 dataSource 的方法，并且有动态的 Line 系列，可能有一种简单的方法可以使用 amchart 但无法获得。

谢谢！

---

数据示例：

[
{
    "deviceName": "device1",
    "dateTime": "30/12/2019 0:45:12",
    "value": "35"
},
{
    "deviceName": "device2",
    "dateTime": "30/12/2019 0:45:12",
    "value": "30"
},
{
    "deviceName": "device3",
    "dateTime": "30/12/2019 0:45:12",
    "value": "20"
},
{
    "deviceName": "device4",
    "dateTime": "30/12/2019 0:45:12",
    "value": "23"
},
{
    "deviceName": "device1", (---> again)
    "dateTime": "30/12/2019 1:15:12",
    "value": "36"
},

(...),

{
    "deviceName": "device4",
    "dateTime": "30/12/2019 12:18:51",
    "value": "29"
}

]

Answer 1

您可能会发现done 是一个更合适的事件，因为您知道此时解析/加载成功。由于您没有发布代码，因此不知道您在尝试中尝试做什么，您可能没有使用正确的 X 和 Y 数据字段正确设置您的系列。

以下内容适合我：

chart.dataSource.url = "/path/to/your/data/payload";
chart.dataSource.events.on('done', function(ev) {
  var data = ev.data;
  var chart = ev.target.component;

  //the following assumes all series value fields are present 
  //in the first element in your array.
  Object.keys(data[0]).filter(function(item) {
    return item !== 'year'; //filter out non-series value fields
  }).forEach(function(valueField) { 
    //create your series
    var series = chart.series.push(new am4charts.LineSeries);
    series.name = valueField;
    series.dataFields.categoryX = 'year';
    series.dataFields.valueY = valueField;
  });
});

Demo