作者:王言 | 来源:互联网 | 2023-07-26 14:27
我正在使用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","value": "30"
},{
"deviceName": "device3","value": "20"
},{
"deviceName": "device4","value": "23"
},{
"deviceName": "device1",(---> again)
"dateTime": "30/12/2019 1:15:12","value": "36"
},(...),"dateTime": "30/12/2019 12:18:51","value": "29"
}
]
您可能会发现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