热门标签 | HotTags
当前位置:  开发笔记 > 编程语言 > 正文

XY图表使用dataSource

我正在使用amcharts4使用vanillaja

我正在使用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


推荐阅读
author-avatar
王言
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有