javascript - 使用数据源的 XY 图表动态线系列

Question

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

我需要创建一个折线图(XY 图表)，其中包含类别 X 轴(时间)和值 Y 轴(温度)。图表必须包含动态系列(我事先不知道有多少系列)并使用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 方式来定义图表和系列。

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

我找不到使用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