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（我能找到的所有其他帖子都不是关于amcharts 4 ）。但是我既需要使用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

XY图表使用dataSource

1 个答案: