Amcharts 将基于分钟时间的数据分组为每日块,无论选择的缩放或轴粒度如何

我对 Amcharts 有疑问,

我有四个完全独立的分钟分隔数据,对应于一些模拟传感器,并将轴配置为具有偶数秒的分辨率,但它只是将 alt 数据分组为 00:00,如图所示。

我该如何解决?

我不认为它必须具有粒度,因为即使所有点都显示在相同的日期时间值上,它们也会全部显示,所以这不是关于它们被组合在一起,而是关于它们被错误设置。


牛魔王的故事
浏览 73回答 1
1回答

浮云间

默认情况下,AmCharts 解析yyyy-MM-dd没有时间戳的日期。您需要修改图表 dateFormatter 的inputDateFormat属性以匹配您的日期+时间戳格式,如此处所述。由于您使用的是 ISO 格式,'i'因此就足够了。chart.dateFormatter.inputDateFormat = 'i';更新代码如下:data = [{&nbsp; &nbsp; "deviceID": 4,&nbsp; &nbsp; "name": "dev4",&nbsp; &nbsp; "value": 63,&nbsp; &nbsp; "timeStamp": "2020-05-01T00:38:00.000Z",&nbsp; &nbsp; "color": "red",&nbsp; &nbsp; "raw": 3,&nbsp; &nbsp; "key-type": "posicion 3"},{&nbsp; &nbsp; "deviceID": 4,&nbsp; &nbsp; "name": "dev4",&nbsp; &nbsp; "value": 31,&nbsp; &nbsp; "timeStamp": "2020-05-01T00:44:00.000Z",&nbsp; &nbsp; "color": "red",&nbsp; &nbsp; "raw": 1,&nbsp; &nbsp; "key-type": "posicion 1"},{&nbsp; &nbsp; "deviceID": 3,&nbsp; &nbsp; "name": "dev3",&nbsp; &nbsp; "value": 72,&nbsp; &nbsp; "timeStamp": "2020-05-01T00:54:00.000Z",&nbsp; &nbsp; "color": "red",&nbsp; &nbsp; "raw": 3,&nbsp; &nbsp; "key-type": "posicion 3"},{&nbsp; &nbsp; "deviceID": 3,&nbsp; &nbsp; "name": "dev3",&nbsp; &nbsp; "value": 67,&nbsp; &nbsp; "timeStamp": "2020-05-01T01:01:00.000Z",&nbsp; &nbsp; "color": "red",&nbsp; &nbsp; "raw": 3,&nbsp; &nbsp; "key-type": "posicion 3"},{&nbsp; &nbsp; "deviceID": 2,&nbsp; &nbsp; "name": "dev2",&nbsp; &nbsp; "value": 76,&nbsp; &nbsp; "timeStamp": "2020-05-01T01:11:00.000Z",&nbsp; &nbsp; "color": "red",&nbsp; &nbsp; "raw": 3,&nbsp; &nbsp; "key-type": "posicion 3"},{&nbsp; &nbsp; "deviceID": 4,&nbsp; &nbsp; "name": "dev4",&nbsp; &nbsp; "value": 38,&nbsp; &nbsp; "timeStamp": "2020-05-01T01:18:00.000Z",&nbsp; &nbsp; "color": "red",&nbsp; &nbsp; "raw": 2,&nbsp; &nbsp; "key-type": "posicion 2"},{&nbsp; &nbsp; "deviceID": 2,&nbsp; &nbsp; "name": "dev2",&nbsp; &nbsp; "value": 40,&nbsp; &nbsp; "timeStamp": "2020-05-01T01:28:00.000Z",&nbsp; &nbsp; "color": "red",&nbsp; &nbsp; "raw": 1,&nbsp; &nbsp; "key-type": "posicion 1"},{&nbsp; &nbsp; "deviceID": 1,&nbsp; &nbsp; "name": "dev1",&nbsp; &nbsp; "value": 97,&nbsp; &nbsp; "timeStamp": "2020-05-01T01:38:00.000Z",&nbsp; &nbsp; "color": "red",&nbsp; &nbsp; "raw": 1,&nbsp; &nbsp; "key-type": "posicion 1"},{&nbsp; &nbsp; "deviceID": 1,&nbsp; &nbsp; "name": "dev1",&nbsp; &nbsp; "value": 61,&nbsp; &nbsp; "timeStamp": "2020-05-01T01:43:00.000Z",&nbsp; &nbsp; "color": "red",&nbsp; &nbsp; "raw": 1,&nbsp; &nbsp; "key-type": "posicion 1"},{&nbsp; &nbsp; "deviceID": 1,&nbsp; &nbsp; "name": "dev1",&nbsp; &nbsp; "value": 35,&nbsp; &nbsp; "timeStamp": "2020-05-01T01:50:00.000Z",&nbsp; &nbsp; "color": "red",&nbsp; &nbsp; "raw": 1,&nbsp; &nbsp; "key-type": "posicion 1"},{&nbsp; &nbsp; "deviceID": 2,&nbsp; &nbsp; "name": "dev2",&nbsp; &nbsp; "value": 30,&nbsp; &nbsp; "timeStamp": "2020-05-01T01:58:00.000Z",&nbsp; &nbsp; "color": "red",&nbsp; &nbsp; "raw": 1,&nbsp; &nbsp; "key-type": "posicion 1"},{&nbsp; &nbsp; "deviceID": 1,&nbsp; &nbsp; "name": "dev1",&nbsp; &nbsp; "value": 73,&nbsp; &nbsp; "timeStamp": "2020-05-01T02:03:00.000Z",&nbsp; &nbsp; "color": "red",&nbsp; &nbsp; "raw": 3,&nbsp; &nbsp; "key-type": "posicion 3"},{&nbsp; &nbsp; "deviceID": 4,&nbsp; &nbsp; "name": "dev4",&nbsp; &nbsp; "value": 42,&nbsp; &nbsp; "timeStamp": "2020-05-01T02:09:00.000Z",&nbsp; &nbsp; "color": "red",&nbsp; &nbsp; "raw": 3,&nbsp; &nbsp; "key-type": "posicion 3"},{&nbsp; &nbsp; "deviceID": 2,&nbsp; &nbsp; "name": "dev2",&nbsp; &nbsp; "value": 90,&nbsp; &nbsp; "timeStamp": "2020-05-01T02:15:00.000Z",&nbsp; &nbsp; "color": "red",&nbsp; &nbsp; "raw": 1,&nbsp; &nbsp; "key-type": "posicion 1"},{&nbsp; &nbsp; "deviceID": 1,&nbsp; &nbsp; "name": "dev1",&nbsp; &nbsp; "value": 86,&nbsp; &nbsp; "timeStamp": "2020-05-01T02:20:00.000Z",&nbsp; &nbsp; "color": "red",&nbsp; &nbsp; "raw": 1,&nbsp; &nbsp; "key-type": "posicion 1"},{&nbsp; &nbsp; "deviceID": 2,&nbsp; &nbsp; "name": "dev2",&nbsp; &nbsp; "value": 69,&nbsp; &nbsp; "timeStamp": "2020-05-01T02:25:00.000Z",&nbsp; &nbsp; "color": "red",&nbsp; &nbsp; "raw": 3,&nbsp; &nbsp; "key-type": "posicion 3"},{&nbsp; &nbsp; "deviceID": 2,&nbsp; &nbsp; "name": "dev2",&nbsp; &nbsp; "value": 78,&nbsp; &nbsp; "timeStamp": "2020-05-01T02:33:00.000Z",&nbsp; &nbsp; "color": "red",&nbsp; &nbsp; "raw": 3,&nbsp; &nbsp; "key-type": "posicion 3"},{&nbsp; &nbsp; "deviceID": 4,&nbsp; &nbsp; "name": "dev4",&nbsp; &nbsp; "value": 55,&nbsp; &nbsp; "timeStamp": "2020-05-01T02:40:00.000Z",&nbsp; &nbsp; "color": "red",&nbsp; &nbsp; "raw": 1,&nbsp; &nbsp; "key-type": "posicion 1"},{&nbsp; &nbsp; "deviceID": 4,&nbsp; &nbsp; "name": "dev4",&nbsp; &nbsp; "value": 38,&nbsp; &nbsp; "timeStamp": "2020-05-01T02:49:00.000Z",&nbsp; &nbsp; "color": "red",&nbsp; &nbsp; "raw": 3,&nbsp; &nbsp; "key-type": "posicion 3"},{&nbsp; &nbsp; "deviceID": 2,&nbsp; &nbsp; "name": "dev2",&nbsp; &nbsp; "value": 39,&nbsp; &nbsp; "timeStamp": "2020-05-01T02:58:00.000Z",&nbsp; &nbsp; "color": "red",&nbsp; &nbsp; "raw": 2,&nbsp; &nbsp; "key-type": "posicion 2"},{&nbsp; &nbsp; "deviceID": 4,&nbsp; &nbsp; "name": "dev4",&nbsp; &nbsp; "value": 50,&nbsp; &nbsp; "timeStamp": "2020-05-01T03:04:00.000Z",&nbsp; &nbsp; "color": "red",&nbsp; &nbsp; "raw": 3,&nbsp; &nbsp; "key-type": "posicion 3"},{&nbsp; &nbsp; "deviceID": 4,&nbsp; &nbsp; "name": "dev4",&nbsp; &nbsp; "value": 31,&nbsp; &nbsp; "timeStamp": "2020-05-01T03:10:00.000Z",&nbsp; &nbsp; "color": "red",&nbsp; &nbsp; "raw": 3,&nbsp; &nbsp; "key-type": "posicion 3"},{&nbsp; &nbsp; "deviceID": 1,&nbsp; &nbsp; "name": "dev1",&nbsp; &nbsp; "value": 31,&nbsp; &nbsp; "timeStamp": "2020-05-01T03:20:00.000Z",&nbsp; &nbsp; "color": "red",&nbsp; &nbsp; "raw": 2,&nbsp; &nbsp; "key-type": "posicion 2"},{&nbsp; &nbsp; "deviceID": 3,&nbsp; &nbsp; "name": "dev3",&nbsp; &nbsp; "value": 86,&nbsp; &nbsp; "timeStamp": "2020-05-01T03:30:00.000Z",&nbsp; &nbsp; "color": "red",&nbsp; &nbsp; "raw": 3,&nbsp; &nbsp; "key-type": "posicion 3"},{&nbsp; &nbsp; "deviceID": 3,&nbsp; &nbsp; "name": "dev3",&nbsp; &nbsp; "value": 44,&nbsp; &nbsp; "timeStamp": "2020-05-01T03:38:00.000Z",&nbsp; &nbsp; "color": "red",&nbsp; &nbsp; "raw": 3,&nbsp; &nbsp; "key-type": "posicion 3"},{&nbsp; &nbsp; "deviceID": 4,&nbsp; &nbsp; "name": "dev4",&nbsp; &nbsp; "value": 31,&nbsp; &nbsp; "timeStamp": "2020-05-01T03:46:00.000Z",&nbsp; &nbsp; "color": "red",&nbsp; &nbsp; "raw": 1,&nbsp; &nbsp; "key-type": "posicion 1"},{&nbsp; &nbsp; "deviceID": 1,&nbsp; &nbsp; "name": "dev1",&nbsp; &nbsp; "value": 45,&nbsp; &nbsp; "timeStamp": "2020-05-01T03:51:00.000Z",&nbsp; &nbsp; "color": "red",&nbsp; &nbsp; "raw": 2,&nbsp; &nbsp; "key-type": "posicion 2"},{&nbsp; &nbsp; "deviceID": 4,&nbsp; &nbsp; "name": "dev4",&nbsp; &nbsp; "value": 34,&nbsp; &nbsp; "timeStamp": "2020-05-01T03:59:00.000Z",&nbsp; &nbsp; "color": "red",&nbsp; &nbsp; "raw": 3,&nbsp; &nbsp; "key-type": "posicion 3"},{&nbsp; &nbsp; "deviceID": 2,&nbsp; &nbsp; "name": "dev2",&nbsp; &nbsp; "value": 83,&nbsp; &nbsp; "timeStamp": "2020-05-01T04:09:00.000Z",&nbsp; &nbsp; "color": "red",&nbsp; &nbsp; "raw": 3,&nbsp; &nbsp; "key-type": "posicion 3"},{&nbsp; &nbsp; "deviceID": 1,&nbsp; &nbsp; "name": "dev1",&nbsp; &nbsp; "value": 32,&nbsp; &nbsp; "timeStamp": "2020-05-01T04:18:00.000Z",&nbsp; &nbsp; "color": "red",&nbsp; &nbsp; "raw": 3,&nbsp; &nbsp; "key-type": "posicion 3"},{&nbsp; &nbsp; "deviceID": 2,&nbsp; &nbsp; "name": "dev2",&nbsp; &nbsp; "value": 58,&nbsp; &nbsp; "timeStamp": "2020-05-01T04:28:00.000Z",&nbsp; &nbsp; "color": "red",&nbsp; &nbsp; "raw": 3,&nbsp; &nbsp; "key-type": "posicion 3"},{&nbsp; &nbsp; "deviceID": 1,&nbsp; &nbsp; "name": "dev1",&nbsp; &nbsp; "value": 68,&nbsp; &nbsp; "timeStamp": "2020-05-01T04:35:00.000Z",&nbsp; &nbsp; "color": "red",&nbsp; &nbsp; "raw": 2,&nbsp; &nbsp; "key-type": "posicion 2"},{&nbsp; &nbsp; "deviceID": 1,&nbsp; &nbsp; "name": "dev1",&nbsp; &nbsp; "value": 78,&nbsp; &nbsp; "timeStamp": "2020-05-01T04:41:00.000Z",&nbsp; &nbsp; "color": "red",&nbsp; &nbsp; "raw": 3,&nbsp; &nbsp; "key-type": "posicion 3"},{&nbsp; &nbsp; "deviceID": 1,&nbsp; &nbsp; "name": "dev1",&nbsp; &nbsp; "value": 98,&nbsp; &nbsp; "timeStamp": "2020-05-01T04:49:00.000Z",&nbsp; &nbsp; "color": "red",&nbsp; &nbsp; "raw": 1,&nbsp; &nbsp; "key-type": "posicion 1"},{&nbsp; &nbsp; "deviceID": 3,&nbsp; &nbsp; "name": "dev3",&nbsp; &nbsp; "value": 69,&nbsp; &nbsp; "timeStamp": "2020-05-01T04:56:00.000Z",&nbsp; &nbsp; "color": "red",&nbsp; &nbsp; "raw": 3,&nbsp; &nbsp; "key-type": "posicion 3"},{&nbsp; &nbsp; "deviceID": 2,&nbsp; &nbsp; "name": "dev2",&nbsp; &nbsp; "value": 52,&nbsp; &nbsp; "timeStamp": "2020-05-01T05:03:00.000Z",&nbsp; &nbsp; "color": "red",&nbsp; &nbsp; "raw": 1,&nbsp; &nbsp; "key-type": "posicion 1"},{&nbsp; &nbsp; "deviceID": 2,&nbsp; &nbsp; "name": "dev2",&nbsp; &nbsp; "value": 88,&nbsp; &nbsp; "timeStamp": "2020-05-01T05:10:00.000Z",&nbsp; &nbsp; "color": "red",&nbsp; &nbsp; "raw": 2,&nbsp; &nbsp; "key-type": "posicion 2"},{&nbsp; &nbsp; "deviceID": 4,&nbsp; &nbsp; "name": "dev4",&nbsp; &nbsp; "value": 67,&nbsp; &nbsp; "timeStamp": "2020-05-01T05:20:00.000Z",&nbsp; &nbsp; "color": "red",&nbsp; &nbsp; "raw": 2,&nbsp; &nbsp; "key-type": "posicion 2"},{&nbsp; &nbsp; "deviceID": 1,&nbsp; &nbsp; "name": "dev1",&nbsp; &nbsp; "value": 34,&nbsp; &nbsp; "timeStamp": "2020-05-01T05:28:00.000Z",&nbsp; &nbsp; "color": "red",&nbsp; &nbsp; "raw": 3,&nbsp; &nbsp; "key-type": "posicion 3"},{&nbsp; &nbsp; "deviceID": 4,&nbsp; &nbsp; "name": "dev4",&nbsp; &nbsp; "value": 60,&nbsp; &nbsp; "timeStamp": "2020-05-01T05:37:00.000Z",&nbsp; &nbsp; "color": "red",&nbsp; &nbsp; "raw": 2,&nbsp; &nbsp; "key-type": "posicion 2"},{&nbsp; &nbsp; "deviceID": 4,&nbsp; &nbsp; "name": "dev4",&nbsp; &nbsp; "value": 66,&nbsp; &nbsp; "timeStamp": "2020-05-01T05:44:00.000Z",&nbsp; &nbsp; "color": "red",&nbsp; &nbsp; "raw": 1,&nbsp; &nbsp; "key-type": "posicion 1"},{&nbsp; &nbsp; "deviceID": 4,&nbsp; &nbsp; "name": "dev4",&nbsp; &nbsp; "value": 64,&nbsp; &nbsp; "timeStamp": "2020-05-01T05:50:00.000Z",&nbsp; &nbsp; "color": "red",&nbsp; &nbsp; "raw": 3,&nbsp; &nbsp; "key-type": "posicion 3"},{&nbsp; &nbsp; "deviceID": 4,&nbsp; &nbsp; "name": "dev4",&nbsp; &nbsp; "value": 96,&nbsp; &nbsp; "timeStamp": "2020-05-01T05:59:00.000Z",&nbsp; &nbsp; "color": "red",&nbsp; &nbsp; "raw": 3,&nbsp; &nbsp; "key-type": "posicion 3"},{&nbsp; &nbsp; "deviceID": 4,&nbsp; &nbsp; "name": "dev4",&nbsp; &nbsp; "value": 38,&nbsp; &nbsp; "timeStamp": "2020-05-01T06:05:00.000Z",&nbsp; &nbsp; "color": "red",&nbsp; &nbsp; "raw": 3,&nbsp; &nbsp; "key-type": "posicion 3"},{&nbsp; &nbsp; "deviceID": 4,&nbsp; &nbsp; "name": "dev4",&nbsp; &nbsp; "value": 46,&nbsp; &nbsp; "timeStamp": "2020-05-01T06:11:00.000Z",&nbsp; &nbsp; "color": "red",&nbsp; &nbsp; "raw": 3,&nbsp; &nbsp; "key-type": "posicion 3"},{&nbsp; &nbsp; "deviceID": 4,&nbsp; &nbsp; "name": "dev4",&nbsp; &nbsp; "value": 32,&nbsp; &nbsp; "timeStamp": "2020-05-01T06:17:00.000Z",&nbsp; &nbsp; "color": "red",&nbsp; &nbsp; "raw": 2,&nbsp; &nbsp; "key-type": "posicion 2"},{&nbsp; &nbsp; "deviceID": 1,&nbsp; &nbsp; "name": "dev1",&nbsp; &nbsp; "value": 54,&nbsp; &nbsp; "timeStamp": "2020-05-01T06:22:00.000Z",&nbsp; &nbsp; "color": "red",&nbsp; &nbsp; "raw": 2,&nbsp; &nbsp; "key-type": "posicion 2"},{&nbsp; &nbsp; "deviceID": 3,&nbsp; &nbsp; "name": "dev3",&nbsp; &nbsp; "value": 38,&nbsp; &nbsp; "timeStamp": "2020-05-01T06:28:00.000Z",&nbsp; &nbsp; "color": "red",&nbsp; &nbsp; "raw": 3,&nbsp; &nbsp; "key-type": "posicion 3"},{&nbsp; &nbsp; "deviceID": 3,&nbsp; &nbsp; "name": "dev3",&nbsp; &nbsp; "value": 49,&nbsp; &nbsp; "timeStamp": "2020-05-01T06:35:00.000Z",&nbsp; &nbsp; "color": "red",&nbsp; &nbsp; "raw": 1,&nbsp; &nbsp; "key-type": "posicion 1"},{&nbsp; &nbsp; "deviceID": 3,&nbsp; &nbsp; "name": "dev3",&nbsp; &nbsp; "value": 51,&nbsp; &nbsp; "timeStamp": "2020-05-01T06:45:00.000Z",&nbsp; &nbsp; "color": "red",&nbsp; &nbsp; "raw": 1,&nbsp; &nbsp; "key-type": "posicion 1"},{&nbsp; &nbsp; "deviceID": 3,&nbsp; &nbsp; "name": "dev3",&nbsp; &nbsp; "value": 33,&nbsp; &nbsp; "timeStamp": "2020-05-01T06:52:00.000Z",&nbsp; &nbsp; "color": "red",&nbsp; &nbsp; "raw": 3,&nbsp; &nbsp; "key-type": "posicion 3"},{&nbsp; &nbsp; "deviceID": 4,&nbsp; &nbsp; "name": "dev4",&nbsp; &nbsp; "value": 65,&nbsp; &nbsp; "timeStamp": "2020-05-01T07:00:00.000Z",&nbsp; &nbsp; "color": "red",&nbsp; &nbsp; "raw": 1,&nbsp; &nbsp; "key-type": "posicion 1"},{&nbsp; &nbsp; "deviceID": 3,&nbsp; &nbsp; "name": "dev3",&nbsp; &nbsp; "value": 84,&nbsp; &nbsp; "timeStamp": "2020-05-01T07:05:00.000Z",&nbsp; &nbsp; "color": "red",&nbsp; &nbsp; "raw": 2,&nbsp; &nbsp; "key-type": "posicion 2"},{&nbsp; &nbsp; "deviceID": 2,&nbsp; &nbsp; "name": "dev2",&nbsp; &nbsp; "value": 81,&nbsp; &nbsp; "timeStamp": "2020-05-01T07:10:00.000Z",&nbsp; &nbsp; "color": "red",&nbsp; &nbsp; "raw": 2,&nbsp; &nbsp; "key-type": "posicion 2"},{&nbsp; &nbsp; "deviceID": 3,&nbsp; &nbsp; "name": "dev3",&nbsp; &nbsp; "value": 87,&nbsp; &nbsp; "timeStamp": "2020-05-01T07:17:00.000Z",&nbsp; &nbsp; "color": "red",&nbsp; &nbsp; "raw": 2,&nbsp; &nbsp; "key-type": "posicion 2"},{&nbsp; &nbsp; "deviceID": 3,&nbsp; &nbsp; "name": "dev3",&nbsp; &nbsp; "value": 85,&nbsp; &nbsp; "timeStamp": "2020-05-01T07:23:00.000Z",&nbsp; &nbsp; "color": "red",&nbsp; &nbsp; "raw": 2,&nbsp; &nbsp; "key-type": "posicion 2"},{&nbsp; &nbsp; "deviceID": 2,&nbsp; &nbsp; "name": "dev2",&nbsp; &nbsp; "value": 94,&nbsp; &nbsp; "timeStamp": "2020-05-01T07:33:00.000Z",&nbsp; &nbsp; "color": "red",&nbsp; &nbsp; "raw": 3,&nbsp; &nbsp; "key-type": "posicion 3"},{&nbsp; &nbsp; "deviceID": 1,&nbsp; &nbsp; "name": "dev1",&nbsp; &nbsp; "value": 73,&nbsp; &nbsp; "timeStamp": "2020-05-01T07:39:00.000Z",&nbsp; &nbsp; "color": "red",&nbsp; &nbsp; "raw": 3,&nbsp; &nbsp; "key-type": "posicion 3"},{&nbsp; &nbsp; "deviceID": 3,&nbsp; &nbsp; "name": "dev3",&nbsp; &nbsp; "value": 93,&nbsp; &nbsp; "timeStamp": "2020-05-01T07:45:00.000Z",&nbsp; &nbsp; "color": "red",&nbsp; &nbsp; "raw": 1,&nbsp; &nbsp; "key-type": "posicion 1"},{&nbsp; &nbsp; "deviceID": 4,&nbsp; &nbsp; "name": "dev4",&nbsp; &nbsp; "value": 84,&nbsp; &nbsp; "timeStamp": "2020-05-01T07:50:00.000Z",&nbsp; &nbsp; "color": "red",&nbsp; &nbsp; "raw": 1,&nbsp; &nbsp; "key-type": "posicion 1"},{&nbsp; &nbsp; "deviceID": 4,&nbsp; &nbsp; "name": "dev4",&nbsp; &nbsp; "value": 75,&nbsp; &nbsp; "timeStamp": "2020-05-01T07:59:00.000Z",&nbsp; &nbsp; "color": "red",&nbsp; &nbsp; "raw": 2,&nbsp; &nbsp; "key-type": "posicion 2"},{&nbsp; &nbsp; "deviceID": 1,&nbsp; &nbsp; "name": "dev1",&nbsp; &nbsp; "value": 53,&nbsp; &nbsp; "timeStamp": "2020-05-01T08:07:00.000Z",&nbsp; &nbsp; "color": "red",&nbsp; &nbsp; "raw": 2,&nbsp; &nbsp; "key-type": "posicion 2"},{&nbsp; &nbsp; "deviceID": 4,&nbsp; &nbsp; "name": "dev4",&nbsp; &nbsp; "value": 98,&nbsp; &nbsp; "timeStamp": "2020-05-01T08:13:00.000Z",&nbsp; &nbsp; "color": "red",&nbsp; &nbsp; "raw": 1,&nbsp; &nbsp; "key-type": "posicion 1"},{&nbsp; &nbsp; "deviceID": 4,&nbsp; &nbsp; "name": "dev4",&nbsp; &nbsp; "value": 40,&nbsp; &nbsp; "timeStamp": "2020-05-01T08:22:00.000Z",&nbsp; &nbsp; "color": "red",&nbsp; &nbsp; "raw": 3,&nbsp; &nbsp; "key-type": "posicion 3"},{&nbsp; &nbsp; "deviceID": 1,&nbsp; &nbsp; "name": "dev1",&nbsp; &nbsp; "value": 83,&nbsp; &nbsp; "timeStamp": "2020-05-01T08:31:00.000Z",&nbsp; &nbsp; "color": "red",&nbsp; &nbsp; "raw": 3,&nbsp; &nbsp; "key-type": "posicion 3"},{&nbsp; &nbsp; "deviceID": 3,&nbsp; &nbsp; "name": "dev3",&nbsp; &nbsp; "value": 77,&nbsp; &nbsp; "timeStamp": "2020-05-01T08:38:00.000Z",&nbsp; &nbsp; "color": "red",&nbsp; &nbsp; "raw": 3,&nbsp; &nbsp; "key-type": "posicion 3"},{&nbsp; &nbsp; "deviceID": 2,&nbsp; &nbsp; "name": "dev2",&nbsp; &nbsp; "value": 91,&nbsp; &nbsp; "timeStamp": "2020-05-01T08:48:00.000Z",&nbsp; &nbsp; "color": "red",&nbsp; &nbsp; "raw": 3,&nbsp; &nbsp; "key-type": "posicion 3"},{&nbsp; &nbsp; "deviceID": 1,&nbsp; &nbsp; "name": "dev1",&nbsp; &nbsp; "value": 96,&nbsp; &nbsp; "timeStamp": "2020-05-01T08:54:00.000Z",&nbsp; &nbsp; "color": "red",&nbsp; &nbsp; "raw": 3,&nbsp; &nbsp; "key-type": "posicion 3"},{&nbsp; &nbsp; "deviceID": 3,&nbsp; &nbsp; "name": "dev3",&nbsp; &nbsp; "value": 87,&nbsp; &nbsp; "timeStamp": "2020-05-01T08:59:00.000Z",&nbsp; &nbsp; "color": "red",&nbsp; &nbsp; "raw": 3,&nbsp; &nbsp; "key-type": "posicion 3"},{&nbsp; &nbsp; "deviceID": 3,&nbsp; &nbsp; "name": "dev3",&nbsp; &nbsp; "value": 99,&nbsp; &nbsp; "timeStamp": "2020-05-01T09:05:00.000Z",&nbsp; &nbsp; "color": "red",&nbsp; &nbsp; "raw": 1,&nbsp; &nbsp; "key-type": "posicion 1"},{&nbsp; &nbsp; "deviceID": 1,&nbsp; &nbsp; "name": "dev1",&nbsp; &nbsp; "value": 49,&nbsp; &nbsp; "timeStamp": "2020-05-01T09:10:00.000Z",&nbsp; &nbsp; "color": "red",&nbsp; &nbsp; "raw": 2,&nbsp; &nbsp; "key-type": "posicion 2"},{&nbsp; &nbsp; "deviceID": 3,&nbsp; &nbsp; "name": "dev3",&nbsp; &nbsp; "value": 90,&nbsp; &nbsp; "timeStamp": "2020-05-01T09:20:00.000Z",&nbsp; &nbsp; "color": "red",&nbsp; &nbsp; "raw": 3,&nbsp; &nbsp; "key-type": "posicion 3"},{&nbsp; &nbsp; "deviceID": 4,&nbsp; &nbsp; "name": "dev4",&nbsp; &nbsp; "value": 38,&nbsp; &nbsp; "timeStamp": "2020-05-01T09:30:00.000Z",&nbsp; &nbsp; "color": "red",&nbsp; &nbsp; "raw": 3,&nbsp; &nbsp; "key-type": "posicion 3"},{&nbsp; &nbsp; "deviceID": 1,&nbsp; &nbsp; "name": "dev1",&nbsp; &nbsp; "value": 52,&nbsp; &nbsp; "timeStamp": "2020-05-01T09:40:00.000Z",&nbsp; &nbsp; "color": "red",&nbsp; &nbsp; "raw": 1,&nbsp; &nbsp; "key-type": "posicion 1"},{&nbsp; &nbsp; "deviceID": 4,&nbsp; &nbsp; "name": "dev4",&nbsp; &nbsp; "value": 66,&nbsp; &nbsp; "timeStamp": "2020-05-01T09:45:00.000Z",&nbsp; &nbsp; "color": "red",&nbsp; &nbsp; "raw": 1,&nbsp; &nbsp; "key-type": "posicion 1"},{&nbsp; &nbsp; "deviceID": 1,&nbsp; &nbsp; "name": "dev1",&nbsp; &nbsp; "value": 96,&nbsp; &nbsp; "timeStamp": "2020-05-01T09:50:00.000Z",&nbsp; &nbsp; "color": "red",&nbsp; &nbsp; "raw": 3,&nbsp; &nbsp; "key-type": "posicion 3"},{&nbsp; &nbsp; "deviceID": 3,&nbsp; &nbsp; "name": "dev3",&nbsp; &nbsp; "value": 54,&nbsp; &nbsp; "timeStamp": "2020-05-01T09:58:00.000Z",&nbsp; &nbsp; "color": "red",&nbsp; &nbsp; "raw": 1,&nbsp; &nbsp; "key-type": "posicion 1"},{&nbsp; &nbsp; "deviceID": 4,&nbsp; &nbsp; "name": "dev4",&nbsp; &nbsp; "value": 67,&nbsp; &nbsp; "timeStamp": "2020-05-01T10:03:00.000Z",&nbsp; &nbsp; "color": "red",&nbsp; &nbsp; "raw": 2,&nbsp; &nbsp; "key-type": "posicion 2"},{&nbsp; &nbsp; "deviceID": 4,&nbsp; &nbsp; "name": "dev4",&nbsp; &nbsp; "value": 35,&nbsp; &nbsp; "timeStamp": "2020-05-01T10:09:00.000Z",&nbsp; &nbsp; "color": "red",&nbsp; &nbsp; "raw": 2,&nbsp; &nbsp; "key-type": "posicion 2"},{&nbsp; &nbsp; "deviceID": 2,&nbsp; &nbsp; "name": "dev2",&nbsp; &nbsp; "value": 94,&nbsp; &nbsp; "timeStamp": "2020-05-01T10:17:00.000Z",&nbsp; &nbsp; "color": "red",&nbsp; &nbsp; "raw": 1,&nbsp; &nbsp; "key-type": "posicion 1"},{&nbsp; &nbsp; "deviceID": 1,&nbsp; &nbsp; "name": "dev1",&nbsp; &nbsp; "value": 61,&nbsp; &nbsp; "timeStamp": "2020-05-01T10:26:00.000Z",&nbsp; &nbsp; "color": "red",&nbsp; &nbsp; "raw": 3,&nbsp; &nbsp; "key-type": "posicion 3"},{&nbsp; &nbsp; "deviceID": 4,&nbsp; &nbsp; "name": "dev4",&nbsp; &nbsp; "value": 46,&nbsp; &nbsp; "timeStamp": "2020-05-01T10:36:00.000Z",&nbsp; &nbsp; "color": "red",&nbsp; &nbsp; "raw": 1,&nbsp; &nbsp; "key-type": "posicion 1"},{&nbsp; &nbsp; "deviceID": 4,&nbsp; &nbsp; "name": "dev4",&nbsp; &nbsp; "value": 45,&nbsp; &nbsp; "timeStamp": "2020-05-01T10:45:00.000Z",&nbsp; &nbsp; "color": "red",&nbsp; &nbsp; "raw": 3,&nbsp; &nbsp; "key-type": "posicion 3"},{&nbsp; &nbsp; "deviceID": 4,&nbsp; &nbsp; "name": "dev4",&nbsp; &nbsp; "value": 91,&nbsp; &nbsp; "timeStamp": "2020-05-01T10:50:00.000Z",&nbsp; &nbsp; "color": "red",&nbsp; &nbsp; "raw": 1,&nbsp; &nbsp; "key-type": "posicion 1"},{&nbsp; &nbsp; "deviceID": 1,&nbsp; &nbsp; "name": "dev1",&nbsp; &nbsp; "value": 68,&nbsp; &nbsp; "timeStamp": "2020-05-01T10:56:00.000Z",&nbsp; &nbsp; "color": "red",&nbsp; &nbsp; "raw": 2,&nbsp; &nbsp; "key-type": "posicion 2"},{&nbsp; &nbsp; "deviceID": 2,&nbsp; &nbsp; "name": "dev2",&nbsp; &nbsp; "value": 61,&nbsp; &nbsp; "timeStamp": "2020-05-01T11:01:00.000Z",&nbsp; &nbsp; "color": "red",&nbsp; &nbsp; "raw": 2,&nbsp; &nbsp; "key-type": "posicion 2"},{&nbsp; &nbsp; "deviceID": 3,&nbsp; &nbsp; "name": "dev3",&nbsp; &nbsp; "value": 78,&nbsp; &nbsp; "timeStamp": "2020-05-01T11:11:00.000Z",&nbsp; &nbsp; "color": "red",&nbsp; &nbsp; "raw": 1,&nbsp; &nbsp; "key-type": "posicion 1"},{&nbsp; &nbsp; "deviceID": 2,&nbsp; &nbsp; "name": "dev2",&nbsp; &nbsp; "value": 60,&nbsp; &nbsp; "timeStamp": "2020-05-01T11:18:00.000Z",&nbsp; &nbsp; "color": "red",&nbsp; &nbsp; "raw": 2,&nbsp; &nbsp; "key-type": "posicion 2"},{&nbsp; &nbsp; "deviceID": 2,&nbsp; &nbsp; "name": "dev2",&nbsp; &nbsp; "value": 76,&nbsp; &nbsp; "timeStamp": "2020-05-01T11:25:00.000Z",&nbsp; &nbsp; "color": "red",&nbsp; &nbsp; "raw": 3,&nbsp; &nbsp; "key-type": "posicion 3"},{&nbsp; &nbsp; "deviceID": 4,&nbsp; &nbsp; "name": "dev4",&nbsp; &nbsp; "value": 66,&nbsp; &nbsp; "timeStamp": "2020-05-01T11:32:00.000Z",&nbsp; &nbsp; "color": "red",&nbsp; &nbsp; "raw": 2,&nbsp; &nbsp; "key-type": "posicion 2"},{&nbsp; &nbsp; "deviceID": 3,&nbsp; &nbsp; "name": "dev3",&nbsp; &nbsp; "value": 57,&nbsp; &nbsp; "timeStamp": "2020-05-01T11:40:00.000Z",&nbsp; &nbsp; "color": "red",&nbsp; &nbsp; "raw": 2,&nbsp; &nbsp; "key-type": "posicion 2"},{&nbsp; &nbsp; "deviceID": 1,&nbsp; &nbsp; "name": "dev1",&nbsp; &nbsp; "value": 92,&nbsp; &nbsp; "timeStamp": "2020-05-01T11:45:00.000Z",&nbsp; &nbsp; "color": "red",&nbsp; &nbsp; "raw": 2,&nbsp; &nbsp; "key-type": "posicion 2"},{&nbsp; &nbsp; "deviceID": 3,&nbsp; &nbsp; "name": "dev3",&nbsp; &nbsp; "value": 45,&nbsp; &nbsp; "timeStamp": "2020-05-01T11:55:00.000Z",&nbsp; &nbsp; "color": "red",&nbsp; &nbsp; "raw": 3,&nbsp; &nbsp; "key-type": "posicion 3"},{&nbsp; &nbsp; "deviceID": 1,&nbsp; &nbsp; "name": "dev1",&nbsp; &nbsp; "value": 40,&nbsp; &nbsp; "timeStamp": "2020-05-01T12:03:00.000Z",&nbsp; &nbsp; "color": "red",&nbsp; &nbsp; "raw": 1,&nbsp; &nbsp; "key-type": "posicion 1"},{&nbsp; &nbsp; "deviceID": 3,&nbsp; &nbsp; "name": "dev3",&nbsp; &nbsp; "value": 67,&nbsp; &nbsp; "timeStamp": "2020-05-01T12:10:00.000Z",&nbsp; &nbsp; "color": "red",&nbsp; &nbsp; "raw": 3,&nbsp; &nbsp; "key-type": "posicion 3"},{&nbsp; &nbsp; "deviceID": 4,&nbsp; &nbsp; "name": "dev4",&nbsp; &nbsp; "value": 45,&nbsp; &nbsp; "timeStamp": "2020-05-01T12:19:00.000Z",&nbsp; &nbsp; "color": "red",&nbsp; &nbsp; "raw": 3,&nbsp; &nbsp; "key-type": "posicion 3"},{&nbsp; &nbsp; "deviceID": 1,&nbsp; &nbsp; "name": "dev1",&nbsp; &nbsp; "value": 78,&nbsp; &nbsp; "timeStamp": "2020-05-01T12:24:00.000Z",&nbsp; &nbsp; "color": "red",&nbsp; &nbsp; "raw": 2,&nbsp; &nbsp; "key-type": "posicion 2"},{&nbsp; &nbsp; "deviceID": 1,&nbsp; &nbsp; "name": "dev1",&nbsp; &nbsp; "value": 31,&nbsp; &nbsp; "timeStamp": "2020-05-01T12:30:00.000Z",&nbsp; &nbsp; "color": "red",&nbsp; &nbsp; "raw": 1,&nbsp; &nbsp; "key-type": "posicion 1"},{&nbsp; &nbsp; "deviceID": 3,&nbsp; &nbsp; "name": "dev3",&nbsp; &nbsp; "value": 53,&nbsp; &nbsp; "timeStamp": "2020-05-01T12:39:00.000Z",&nbsp; &nbsp; "color": "red",&nbsp; &nbsp; "raw": 2,&nbsp; &nbsp; "key-type": "posicion 2"},{&nbsp; &nbsp; "deviceID": 1,&nbsp; &nbsp; "name": "dev1",&nbsp; &nbsp; "value": 69,&nbsp; &nbsp; "timeStamp": "2020-05-01T12:47:00.000Z",&nbsp; &nbsp; "color": "red",&nbsp; &nbsp; "raw": 2,&nbsp; &nbsp; "key-type": "posicion 2"},{&nbsp; &nbsp; "deviceID": 3,&nbsp; &nbsp; "name": "dev3",&nbsp; &nbsp; "value": 71,&nbsp; &nbsp; "timeStamp": "2020-05-01T12:52:00.000Z",&nbsp; &nbsp; "color": "red",&nbsp; &nbsp; "raw": 1,&nbsp; &nbsp; "key-type": "posicion 1"}]&nbsp; &nbsp; am4core.useTheme(am4themes_animated);&nbsp; &nbsp; // Themes end&nbsp; &nbsp; var chart = am4core.create("divStockPrices", am4charts.XYChart);&nbsp; &nbsp; chart.padding(0, 15, 0, 15);&nbsp; &nbsp; chart.colors.step = 3;&nbsp; &nbsp; chart.dateFormatter.inputDateFormat = 'i';&nbsp; &nbsp; chart.cursor = new am4charts.XYCursor();&nbsp; &nbsp; let msje = `&nbsp; &nbsp; <center><strong><a href=LINK>NAME</a> {categoryX}</strong></center>&nbsp; &nbsp; <hr />&nbsp; &nbsp; <table>&nbsp; &nbsp; &nbsp; &nbsp; <tr>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <th align="left">Value</th>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <td>ACTUAL%</td>&nbsp; &nbsp; &nbsp; &nbsp; </tr>&nbsp; &nbsp; </table>&nbsp; &nbsp; <hr />`&nbsp; &nbsp; function prepareData(data) {&nbsp; &nbsp; &nbsp; &nbsp; let datas = {};&nbsp; &nbsp; &nbsp; &nbsp; datas.length = 0;&nbsp; &nbsp; &nbsp; &nbsp; for (let i = 0; i < data.length; i++) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; let miBool = false;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; ids = Object.keys(datas)&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; for (let j = 0; j < ids.length; j++) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; if (data[i].deviceID == ids[j]) miBool = true;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; if (!miBool) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; datas[data[i].deviceID] = [data[i]]&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; datas.length += 1;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; } else datas[data[i].deviceID].push(data[i])&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; return datas;&nbsp; &nbsp; }&nbsp; &nbsp; var quantity = 1000;&nbsp; &nbsp; let data2 = prepareData(data);&nbsp; &nbsp; //chart.data = data2;&nbsp; &nbsp; // the following line makes value axes to be arranged vertically.&nbsp; &nbsp; chart.leftAxesContainer.layout = "vertical";&nbsp; &nbsp; // uncomment this line if you want to change order of axes&nbsp; &nbsp; //chart.bottomAxesContainer.reverseOrder = true;&nbsp; &nbsp; var dateAxis = chart.xAxes.push(new am4charts.DateAxis());&nbsp; &nbsp; dateAxis.renderer.grid.template.location = 0;&nbsp; &nbsp; dateAxis.renderer.ticks.template.length = 8;&nbsp; &nbsp; dateAxis.renderer.ticks.template.strokeOpacity = 0.1;&nbsp; &nbsp; dateAxis.renderer.grid.template.disabled = true;&nbsp; &nbsp; dateAxis.renderer.ticks.template.disabled = false;&nbsp; &nbsp; dateAxis.renderer.ticks.template.strokeOpacity = 0.2;&nbsp; &nbsp; dateAxis.renderer.minLabelPosition = 0.01;&nbsp; &nbsp; dateAxis.renderer.maxLabelPosition = 0.99;&nbsp; &nbsp; dateAxis.keepSelection = true;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp; dateAxis.baseInterval = {&nbsp; &nbsp; &nbsp; &nbsp; "timeUnit": "minute",&nbsp; &nbsp; &nbsp; &nbsp; "count": 1&nbsp; &nbsp; };&nbsp; &nbsp; dateAxis.groupIntervals.setAll([&nbsp; &nbsp; &nbsp; &nbsp; { timeUnit: "minute", count: 1 },&nbsp; &nbsp; &nbsp; &nbsp; { timeUnit: "minute", count: 5 },&nbsp; &nbsp; &nbsp; &nbsp; { timeUnit: "minute", count: 10 },&nbsp; &nbsp; &nbsp; &nbsp; { timeUnit: "minute", count: 15 },&nbsp; &nbsp; &nbsp; &nbsp; { timeUnit: "minute", count: 30 },&nbsp; &nbsp; &nbsp; &nbsp; { timeUnit: "hour", count: 1 },&nbsp; &nbsp; &nbsp; &nbsp; { timeUnit: "hour", count: 3 },&nbsp; &nbsp; &nbsp; &nbsp; { timeUnit: "hour", count: 6 },&nbsp; &nbsp; &nbsp; &nbsp; { timeUnit: "hour", count: 12 },&nbsp; &nbsp; &nbsp; &nbsp; { timeUnit: "day", count: 1 },&nbsp; &nbsp; &nbsp; &nbsp; { timeUnit: "day", count: 2 },&nbsp; &nbsp; &nbsp; &nbsp; { timeUnit: "day", count: 3 },&nbsp; &nbsp; &nbsp; &nbsp; { timeUnit: "day", count: 4 },&nbsp; &nbsp; &nbsp; &nbsp; { timeUnit: "day", count: 5 },&nbsp; &nbsp; &nbsp; &nbsp; { timeUnit: "week", count: 1 },&nbsp; &nbsp; &nbsp; &nbsp; { timeUnit: "month", count: 1 },&nbsp; &nbsp; &nbsp; &nbsp; { timeUnit: "month", count: 2 },&nbsp; &nbsp; &nbsp; &nbsp; { timeUnit: "month", count: 3 },&nbsp; &nbsp; &nbsp; &nbsp; { timeUnit: "month", count: 6 },&nbsp; &nbsp; &nbsp; &nbsp; { timeUnit: "year", count: 1 },&nbsp; &nbsp; &nbsp; &nbsp; { timeUnit: "year", count: 2 },&nbsp; &nbsp; &nbsp; &nbsp; { timeUnit: "year", count: 5 },&nbsp; &nbsp; &nbsp; &nbsp; { timeUnit: "year", count: 10 },&nbsp; &nbsp; &nbsp; &nbsp; { timeUnit: "year", count: 50 },&nbsp; &nbsp; &nbsp; &nbsp; { timeUnit: "year", count: 100 },&nbsp; &nbsp; &nbsp; &nbsp; { timeUnit: "year", count: 200 },&nbsp; &nbsp; &nbsp; &nbsp; { timeUnit: "year", count: 500 }&nbsp; &nbsp; &nbsp; &nbsp; ]);&nbsp; &nbsp; dateAxis.groupData = true;&nbsp; &nbsp; var valueAxis = chart.yAxes.push(new am4charts.ValueAxis());&nbsp; &nbsp; valueAxis.tooltip.disabled = true;&nbsp; &nbsp; valueAxis.zIndex = 1;&nbsp; &nbsp; valueAxis.renderer.baseGrid.disabled = true;&nbsp; &nbsp; // height of axis&nbsp; &nbsp; valueAxis.height = am4core.percent(65);&nbsp; &nbsp; valueAxis.renderer.gridContainer.background.fill = am4core.color("#000000");&nbsp; &nbsp; valueAxis.renderer.gridContainer.background.fillOpacity = 0.05;&nbsp; &nbsp; valueAxis.renderer.inside = true;&nbsp; &nbsp; valueAxis.renderer.labels.template.verticalCenter = "bottom";&nbsp; &nbsp; valueAxis.renderer.labels.template.padding(2, 2, 2, 2);&nbsp; &nbsp; //valueAxis.renderer.maxLabelPosition = 0.95;&nbsp; &nbsp; valueAxis.renderer.fontSize = "0.8em"&nbsp; &nbsp; let series = []&nbsp; &nbsp; for (let i = 0; i < data2.length; i++) {&nbsp; &nbsp; &nbsp; &nbsp; series.push(chart.series.push(new am4charts.LineSeries()));&nbsp; &nbsp; &nbsp; &nbsp; series[i].dataFields.dateX = "timeStamp";&nbsp; &nbsp; &nbsp; &nbsp; series[i].dataFields.valueY = "value";&nbsp; &nbsp; &nbsp; &nbsp; //series[i].dataFields.valueYShow = "changePercent";&nbsp; &nbsp; &nbsp; &nbsp; //series[i].tooltipText = "{name}: {valueY.changePercent.formatNumber('[#0c0]+#.00|[#c00]#.##|0')}%";&nbsp; &nbsp; &nbsp; &nbsp; series[i].name = "Stock A";&nbsp; &nbsp; &nbsp; &nbsp; series[i].tooltip.getFillFromObject = false;&nbsp; &nbsp; &nbsp; &nbsp; series[i].tooltip.getStrokeFromObject = true;&nbsp; &nbsp; &nbsp; &nbsp; series[i].tooltip.background.fill = am4core.color("#fff");&nbsp; &nbsp; &nbsp; &nbsp; series[i].tooltip.background.strokeWidth = 2;&nbsp; &nbsp; &nbsp; &nbsp; series[i].tooltip.label.fill = series[i].stroke;&nbsp; &nbsp; &nbsp; &nbsp; series[i].data = data2[i];&nbsp; &nbsp; &nbsp; &nbsp; series[i].tensionX = 0.9;&nbsp; &nbsp; &nbsp; &nbsp; let bullet = series[i].bullets.push(new am4charts.Bullet());&nbsp; &nbsp; &nbsp; &nbsp; // Maneja el texto a mostrar cuando se posa el mouse encima&nbsp; &nbsp; &nbsp; &nbsp; bullet.tooltipHTML = msje.replace('ACTUAL', "{value}").replace('LINK', "").replace('NAME', "{name}");&nbsp; &nbsp; &nbsp; &nbsp; // Modifica el marcador para ser un circulo con el formato especificado&nbsp; &nbsp; &nbsp; &nbsp; let circle = bullet.createChild(am4core.Circle);&nbsp; &nbsp; &nbsp; &nbsp; circle.width = 3;&nbsp; &nbsp; &nbsp; &nbsp; circle.height = 3;&nbsp; &nbsp; &nbsp; &nbsp; circle.horizontalCenter = "middle";&nbsp; &nbsp; &nbsp; &nbsp; circle.verticalCenter = "middle";&nbsp; &nbsp; &nbsp; &nbsp; circle.stroke = am4core.color("#999999");&nbsp; &nbsp; &nbsp; &nbsp; circle.strokeWidth = 2;&nbsp; &nbsp; &nbsp; &nbsp; circle.fill = am4core.color("{color}");&nbsp; &nbsp; }&nbsp; &nbsp; function customizeGrip(grip) {&nbsp; &nbsp; &nbsp; &nbsp; grip.icon.disabled = true;&nbsp; &nbsp; &nbsp; &nbsp; grip.background.disabled = true;&nbsp; &nbsp; }&nbsp; &nbsp; var scrollbarX = new am4charts.XYChartScrollbar();&nbsp; &nbsp; for (let i = 0; i < data2.length; i++) {&nbsp; &nbsp; &nbsp; &nbsp; scrollbarX.series.push(series[i]);&nbsp; &nbsp; }&nbsp; &nbsp; customizeGrip(scrollbarX.startGrip);&nbsp; &nbsp; customizeGrip(scrollbarX.endGrip);&nbsp; &nbsp; scrollbarX.marginBottom = 20;&nbsp; &nbsp; var sbSeries = scrollbarX.scrollbarChart.series.getIndex(0);&nbsp; &nbsp; sbSeries.dataFields.valueYShow = undefined;&nbsp; &nbsp; chart.scrollbarX = scrollbarX;<style>&nbsp;&nbsp; &nbsp; .graphContainer&nbsp; {&nbsp; &nbsp; &nbsp; &nbsp; width: 500px;&nbsp; &nbsp; &nbsp; &nbsp; height: 500px;&nbsp; &nbsp; }&nbsp; &nbsp;&nbsp;#chartdata {&nbsp; max-height: 400px;&nbsp; overflow: auto;}</style><script> let TargetID = 2; </script><script src="node_modules/ng"></script><script src="https://cdn.amcharts.com/lib/4/core.js"></script><script src="https://cdn.amcharts.com/lib/4/charts.js"></script><script src="https://cdn.amcharts.com/lib/4/plugins/forceDirected.js"></script><script src="https://cdn.amcharts.com/lib/4/plugins/piechart.js"></script><script src="https://cdn.amcharts.com/lib/4/themes/animated.js"></script><div class = "graphContainer" id="divStockPrices"></div>
打开App,查看更多内容
随时随地看视频慕课网APP

相关分类

JavaScript