javascript - 无论选择的缩放或轴粒度如何，Amcharts 都会将基于分钟的数据分组到一个每日块上
问题描述
我对 Amcharts 有疑问，
我有四个完全独立的分钟分隔数据，它们对应于一些模拟传感器，并将轴配置为具有偶数秒的分辨率，但它只是在 00:00 对数据进行分组，如图所示。
我该如何解决？
我不认为它必须具有粒度，因为即使所有点都显示在同一个日期时间值上，它们也会全部显示，所以这不是关于它们被组合在一起，而是关于它们被错误地设置。
这是我的数据生成器 python 代码
import random as rd
import datetime as dt
archivo = open("data.js","w")
dataFormat = '''{{
\t"deviceID": {0},
\t"name": "dev{0}",
\t"value": {1},
\t"timeStamp": "{2}",
\t"color": "red",
\t"raw": {3},
\t"key-type": "posicion {3}"
}}'''
'''
0: dev ID
1: valor medido
2: timestamp
3: gr id
'''
primero = True
devices = [1,2,3,4]
grupos = [1,2,3]
mediciones = 500
minute = 0
dateFormat = "%Y-%m-%dT%H:%M:%S.%fZ"
timeStamp = dt.datetime.strptime("2020-05-01T00:00:00.000Z",dateFormat)
archivo.write("data = [")
for device in devices:
timeStamp = timeStamp + dt.timedelta(minutes = rd.randint(20,30))
for medicion in range(1,mediciones):
if rd.randint(0,20)>3:
if (not primero):
archivo.write(",")
primero = False
timeStamp = timeStamp + dt.timedelta(minutes = rd.randint(5,10))
lastDevice = ""
newDevice = ""
while newDevice == lastDevice:
newDevice = rd.choice(devices)
archivo.write(dataFormat.format(newDevice, rd.randint(30,100), timeStamp.strftime(dateFormat), rd.choice(grupos)))
lastDevice = newDevice
archivo.write("]")
archivo.close()
这是amchart代码
data = [{
"deviceID": 4,
"name": "dev4",
"value": 63,
"timeStamp": "2020-05-01T00:38:00.000Z",
"color": "red",
"raw": 3,
"key-type": "posicion 3"
},{
"deviceID": 4,
"name": "dev4",
"value": 31,
"timeStamp": "2020-05-01T00:44:00.000Z",
"color": "red",
"raw": 1,
"key-type": "posicion 1"
},{
"deviceID": 3,
"name": "dev3",
"value": 72,
"timeStamp": "2020-05-01T00:54:00.000Z",
"color": "red",
"raw": 3,
"key-type": "posicion 3"
},{
"deviceID": 3,
"name": "dev3",
"value": 67,
"timeStamp": "2020-05-01T01:01:00.000Z",
"color": "red",
"raw": 3,
"key-type": "posicion 3"
},{
"deviceID": 2,
"name": "dev2",
"value": 76,
"timeStamp": "2020-05-01T01:11:00.000Z",
"color": "red",
"raw": 3,
"key-type": "posicion 3"
},{
"deviceID": 4,
"name": "dev4",
"value": 38,
"timeStamp": "2020-05-01T01:18:00.000Z",
"color": "red",
"raw": 2,
"key-type": "posicion 2"
},{
"deviceID": 2,
"name": "dev2",
"value": 40,
"timeStamp": "2020-05-01T01:28:00.000Z",
"color": "red",
"raw": 1,
"key-type": "posicion 1"
},{
"deviceID": 1,
"name": "dev1",
"value": 97,
"timeStamp": "2020-05-01T01:38:00.000Z",
"color": "red",
"raw": 1,
"key-type": "posicion 1"
},{
"deviceID": 1,
"name": "dev1",
"value": 61,
"timeStamp": "2020-05-01T01:43:00.000Z",
"color": "red",
"raw": 1,
"key-type": "posicion 1"
},{
"deviceID": 1,
"name": "dev1",
"value": 35,
"timeStamp": "2020-05-01T01:50:00.000Z",
"color": "red",
"raw": 1,
"key-type": "posicion 1"
},{
"deviceID": 2,
"name": "dev2",
"value": 30,
"timeStamp": "2020-05-01T01:58:00.000Z",
"color": "red",
"raw": 1,
"key-type": "posicion 1"
},{
"deviceID": 1,
"name": "dev1",
"value": 73,
"timeStamp": "2020-05-01T02:03:00.000Z",
"color": "red",
"raw": 3,
"key-type": "posicion 3"
},{
"deviceID": 4,
"name": "dev4",
"value": 42,
"timeStamp": "2020-05-01T02:09:00.000Z",
"color": "red",
"raw": 3,
"key-type": "posicion 3"
},{
"deviceID": 2,
"name": "dev2",
"value": 90,
"timeStamp": "2020-05-01T02:15:00.000Z",
"color": "red",
"raw": 1,
"key-type": "posicion 1"
},{
"deviceID": 1,
"name": "dev1",
"value": 86,
"timeStamp": "2020-05-01T02:20:00.000Z",
"color": "red",
"raw": 1,
"key-type": "posicion 1"
},{
"deviceID": 2,
"name": "dev2",
"value": 69,
"timeStamp": "2020-05-01T02:25:00.000Z",
"color": "red",
"raw": 3,
"key-type": "posicion 3"
},{
"deviceID": 2,
"name": "dev2",
"value": 78,
"timeStamp": "2020-05-01T02:33:00.000Z",
"color": "red",
"raw": 3,
"key-type": "posicion 3"
},{
"deviceID": 4,
"name": "dev4",
"value": 55,
"timeStamp": "2020-05-01T02:40:00.000Z",
"color": "red",
"raw": 1,
"key-type": "posicion 1"
},{
"deviceID": 4,
"name": "dev4",
"value": 38,
"timeStamp": "2020-05-01T02:49:00.000Z",
"color": "red",
"raw": 3,
"key-type": "posicion 3"
},{
"deviceID": 2,
"name": "dev2",
"value": 39,
"timeStamp": "2020-05-01T02:58:00.000Z",
"color": "red",
"raw": 2,
"key-type": "posicion 2"
},{
"deviceID": 4,
"name": "dev4",
"value": 50,
"timeStamp": "2020-05-01T03:04:00.000Z",
"color": "red",
"raw": 3,
"key-type": "posicion 3"
},{
"deviceID": 4,
"name": "dev4",
"value": 31,
"timeStamp": "2020-05-01T03:10:00.000Z",
"color": "red",
"raw": 3,
"key-type": "posicion 3"
},{
"deviceID": 1,
"name": "dev1",
"value": 31,
"timeStamp": "2020-05-01T03:20:00.000Z",
"color": "red",
"raw": 2,
"key-type": "posicion 2"
},{
"deviceID": 3,
"name": "dev3",
"value": 86,
"timeStamp": "2020-05-01T03:30:00.000Z",
"color": "red",
"raw": 3,
"key-type": "posicion 3"
},{
"deviceID": 3,
"name": "dev3",
"value": 44,
"timeStamp": "2020-05-01T03:38:00.000Z",
"color": "red",
"raw": 3,
"key-type": "posicion 3"
},{
"deviceID": 4,
"name": "dev4",
"value": 31,
"timeStamp": "2020-05-01T03:46:00.000Z",
"color": "red",
"raw": 1,
"key-type": "posicion 1"
},{
"deviceID": 1,
"name": "dev1",
"value": 45,
"timeStamp": "2020-05-01T03:51:00.000Z",
"color": "red",
"raw": 2,
"key-type": "posicion 2"
},{
"deviceID": 4,
"name": "dev4",
"value": 34,
"timeStamp": "2020-05-01T03:59:00.000Z",
"color": "red",
"raw": 3,
"key-type": "posicion 3"
},{
"deviceID": 2,
"name": "dev2",
"value": 83,
"timeStamp": "2020-05-01T04:09:00.000Z",
"color": "red",
"raw": 3,
"key-type": "posicion 3"
},{
"deviceID": 1,
"name": "dev1",
"value": 32,
"timeStamp": "2020-05-01T04:18:00.000Z",
"color": "red",
"raw": 3,
"key-type": "posicion 3"
},{
"deviceID": 2,
"name": "dev2",
"value": 58,
"timeStamp": "2020-05-01T04:28:00.000Z",
"color": "red",
"raw": 3,
"key-type": "posicion 3"
},{
"deviceID": 1,
"name": "dev1",
"value": 68,
"timeStamp": "2020-05-01T04:35:00.000Z",
"color": "red",
"raw": 2,
"key-type": "posicion 2"
},{
"deviceID": 1,
"name": "dev1",
"value": 78,
"timeStamp": "2020-05-01T04:41:00.000Z",
"color": "red",
"raw": 3,
"key-type": "posicion 3"
},{
"deviceID": 1,
"name": "dev1",
"value": 98,
"timeStamp": "2020-05-01T04:49:00.000Z",
"color": "red",
"raw": 1,
"key-type": "posicion 1"
},{
"deviceID": 3,
"name": "dev3",
"value": 69,
"timeStamp": "2020-05-01T04:56:00.000Z",
"color": "red",
"raw": 3,
"key-type": "posicion 3"
},{
"deviceID": 2,
"name": "dev2",
"value": 52,
"timeStamp": "2020-05-01T05:03:00.000Z",
"color": "red",
"raw": 1,
"key-type": "posicion 1"
},{
"deviceID": 2,
"name": "dev2",
"value": 88,
"timeStamp": "2020-05-01T05:10:00.000Z",
"color": "red",
"raw": 2,
"key-type": "posicion 2"
},{
"deviceID": 4,
"name": "dev4",
"value": 67,
"timeStamp": "2020-05-01T05:20:00.000Z",
"color": "red",
"raw": 2,
"key-type": "posicion 2"
},{
"deviceID": 1,
"name": "dev1",
"value": 34,
"timeStamp": "2020-05-01T05:28:00.000Z",
"color": "red",
"raw": 3,
"key-type": "posicion 3"
},{
"deviceID": 4,
"name": "dev4",
"value": 60,
"timeStamp": "2020-05-01T05:37:00.000Z",
"color": "red",
"raw": 2,
"key-type": "posicion 2"
},{
"deviceID": 4,
"name": "dev4",
"value": 66,
"timeStamp": "2020-05-01T05:44:00.000Z",
"color": "red",
"raw": 1,
"key-type": "posicion 1"
},{
"deviceID": 4,
"name": "dev4",
"value": 64,
"timeStamp": "2020-05-01T05:50:00.000Z",
"color": "red",
"raw": 3,
"key-type": "posicion 3"
},{
"deviceID": 4,
"name": "dev4",
"value": 96,
"timeStamp": "2020-05-01T05:59:00.000Z",
"color": "red",
"raw": 3,
"key-type": "posicion 3"
},{
"deviceID": 4,
"name": "dev4",
"value": 38,
"timeStamp": "2020-05-01T06:05:00.000Z",
"color": "red",
"raw": 3,
"key-type": "posicion 3"
},{
"deviceID": 4,
"name": "dev4",
"value": 46,
"timeStamp": "2020-05-01T06:11:00.000Z",
"color": "red",
"raw": 3,
"key-type": "posicion 3"
},{
"deviceID": 4,
"name": "dev4",
"value": 32,
"timeStamp": "2020-05-01T06:17:00.000Z",
"color": "red",
"raw": 2,
"key-type": "posicion 2"
},{
"deviceID": 1,
"name": "dev1",
"value": 54,
"timeStamp": "2020-05-01T06:22:00.000Z",
"color": "red",
"raw": 2,
"key-type": "posicion 2"
},{
"deviceID": 3,
"name": "dev3",
"value": 38,
"timeStamp": "2020-05-01T06:28:00.000Z",
"color": "red",
"raw": 3,
"key-type": "posicion 3"
},{
"deviceID": 3,
"name": "dev3",
"value": 49,
"timeStamp": "2020-05-01T06:35:00.000Z",
"color": "red",
"raw": 1,
"key-type": "posicion 1"
},{
"deviceID": 3,
"name": "dev3",
"value": 51,
"timeStamp": "2020-05-01T06:45:00.000Z",
"color": "red",
"raw": 1,
"key-type": "posicion 1"
},{
"deviceID": 3,
"name": "dev3",
"value": 33,
"timeStamp": "2020-05-01T06:52:00.000Z",
"color": "red",
"raw": 3,
"key-type": "posicion 3"
},{
"deviceID": 4,
"name": "dev4",
"value": 65,
"timeStamp": "2020-05-01T07:00:00.000Z",
"color": "red",
"raw": 1,
"key-type": "posicion 1"
},{
"deviceID": 3,
"name": "dev3",
"value": 84,
"timeStamp": "2020-05-01T07:05:00.000Z",
"color": "red",
"raw": 2,
"key-type": "posicion 2"
},{
"deviceID": 2,
"name": "dev2",
"value": 81,
"timeStamp": "2020-05-01T07:10:00.000Z",
"color": "red",
"raw": 2,
"key-type": "posicion 2"
},{
"deviceID": 3,
"name": "dev3",
"value": 87,
"timeStamp": "2020-05-01T07:17:00.000Z",
"color": "red",
"raw": 2,
"key-type": "posicion 2"
},{
"deviceID": 3,
"name": "dev3",
"value": 85,
"timeStamp": "2020-05-01T07:23:00.000Z",
"color": "red",
"raw": 2,
"key-type": "posicion 2"
},{
"deviceID": 2,
"name": "dev2",
"value": 94,
"timeStamp": "2020-05-01T07:33:00.000Z",
"color": "red",
"raw": 3,
"key-type": "posicion 3"
},{
"deviceID": 1,
"name": "dev1",
"value": 73,
"timeStamp": "2020-05-01T07:39:00.000Z",
"color": "red",
"raw": 3,
"key-type": "posicion 3"
},{
"deviceID": 3,
"name": "dev3",
"value": 93,
"timeStamp": "2020-05-01T07:45:00.000Z",
"color": "red",
"raw": 1,
"key-type": "posicion 1"
},{
"deviceID": 4,
"name": "dev4",
"value": 84,
"timeStamp": "2020-05-01T07:50:00.000Z",
"color": "red",
"raw": 1,
"key-type": "posicion 1"
},{
"deviceID": 4,
"name": "dev4",
"value": 75,
"timeStamp": "2020-05-01T07:59:00.000Z",
"color": "red",
"raw": 2,
"key-type": "posicion 2"
},{
"deviceID": 1,
"name": "dev1",
"value": 53,
"timeStamp": "2020-05-01T08:07:00.000Z",
"color": "red",
"raw": 2,
"key-type": "posicion 2"
},{
"deviceID": 4,
"name": "dev4",
"value": 98,
"timeStamp": "2020-05-01T08:13:00.000Z",
"color": "red",
"raw": 1,
"key-type": "posicion 1"
},{
"deviceID": 4,
"name": "dev4",
"value": 40,
"timeStamp": "2020-05-01T08:22:00.000Z",
"color": "red",
"raw": 3,
"key-type": "posicion 3"
},{
"deviceID": 1,
"name": "dev1",
"value": 83,
"timeStamp": "2020-05-01T08:31:00.000Z",
"color": "red",
"raw": 3,
"key-type": "posicion 3"
},{
"deviceID": 3,
"name": "dev3",
"value": 77,
"timeStamp": "2020-05-01T08:38:00.000Z",
"color": "red",
"raw": 3,
"key-type": "posicion 3"
},{
"deviceID": 2,
"name": "dev2",
"value": 91,
"timeStamp": "2020-05-01T08:48:00.000Z",
"color": "red",
"raw": 3,
"key-type": "posicion 3"
},{
"deviceID": 1,
"name": "dev1",
"value": 96,
"timeStamp": "2020-05-01T08:54:00.000Z",
"color": "red",
"raw": 3,
"key-type": "posicion 3"
},{
"deviceID": 3,
"name": "dev3",
"value": 87,
"timeStamp": "2020-05-01T08:59:00.000Z",
"color": "red",
"raw": 3,
"key-type": "posicion 3"
},{
"deviceID": 3,
"name": "dev3",
"value": 99,
"timeStamp": "2020-05-01T09:05:00.000Z",
"color": "red",
"raw": 1,
"key-type": "posicion 1"
},{
"deviceID": 1,
"name": "dev1",
"value": 49,
"timeStamp": "2020-05-01T09:10:00.000Z",
"color": "red",
"raw": 2,
"key-type": "posicion 2"
},{
"deviceID": 3,
"name": "dev3",
"value": 90,
"timeStamp": "2020-05-01T09:20:00.000Z",
"color": "red",
"raw": 3,
"key-type": "posicion 3"
},{
"deviceID": 4,
"name": "dev4",
"value": 38,
"timeStamp": "2020-05-01T09:30:00.000Z",
"color": "red",
"raw": 3,
"key-type": "posicion 3"
},{
"deviceID": 1,
"name": "dev1",
"value": 52,
"timeStamp": "2020-05-01T09:40:00.000Z",
"color": "red",
"raw": 1,
"key-type": "posicion 1"
},{
"deviceID": 4,
"name": "dev4",
"value": 66,
"timeStamp": "2020-05-01T09:45:00.000Z",
"color": "red",
"raw": 1,
"key-type": "posicion 1"
},{
"deviceID": 1,
"name": "dev1",
"value": 96,
"timeStamp": "2020-05-01T09:50:00.000Z",
"color": "red",
"raw": 3,
"key-type": "posicion 3"
},{
"deviceID": 3,
"name": "dev3",
"value": 54,
"timeStamp": "2020-05-01T09:58:00.000Z",
"color": "red",
"raw": 1,
"key-type": "posicion 1"
},{
"deviceID": 4,
"name": "dev4",
"value": 67,
"timeStamp": "2020-05-01T10:03:00.000Z",
"color": "red",
"raw": 2,
"key-type": "posicion 2"
},{
"deviceID": 4,
"name": "dev4",
"value": 35,
"timeStamp": "2020-05-01T10:09:00.000Z",
"color": "red",
"raw": 2,
"key-type": "posicion 2"
},{
"deviceID": 2,
"name": "dev2",
"value": 94,
"timeStamp": "2020-05-01T10:17:00.000Z",
"color": "red",
"raw": 1,
"key-type": "posicion 1"
},{
"deviceID": 1,
"name": "dev1",
"value": 61,
"timeStamp": "2020-05-01T10:26:00.000Z",
"color": "red",
"raw": 3,
"key-type": "posicion 3"
},{
"deviceID": 4,
"name": "dev4",
"value": 46,
"timeStamp": "2020-05-01T10:36:00.000Z",
"color": "red",
"raw": 1,
"key-type": "posicion 1"
},{
"deviceID": 4,
"name": "dev4",
"value": 45,
"timeStamp": "2020-05-01T10:45:00.000Z",
"color": "red",
"raw": 3,
"key-type": "posicion 3"
},{
"deviceID": 4,
"name": "dev4",
"value": 91,
"timeStamp": "2020-05-01T10:50:00.000Z",
"color": "red",
"raw": 1,
"key-type": "posicion 1"
},{
"deviceID": 1,
"name": "dev1",
"value": 68,
"timeStamp": "2020-05-01T10:56:00.000Z",
"color": "red",
"raw": 2,
"key-type": "posicion 2"
},{
"deviceID": 2,
"name": "dev2",
"value": 61,
"timeStamp": "2020-05-01T11:01:00.000Z",
"color": "red",
"raw": 2,
"key-type": "posicion 2"
},{
"deviceID": 3,
"name": "dev3",
"value": 78,
"timeStamp": "2020-05-01T11:11:00.000Z",
"color": "red",
"raw": 1,
"key-type": "posicion 1"
},{
"deviceID": 2,
"name": "dev2",
"value": 60,
"timeStamp": "2020-05-01T11:18:00.000Z",
"color": "red",
"raw": 2,
"key-type": "posicion 2"
},{
"deviceID": 2,
"name": "dev2",
"value": 76,
"timeStamp": "2020-05-01T11:25:00.000Z",
"color": "red",
"raw": 3,
"key-type": "posicion 3"
},{
"deviceID": 4,
"name": "dev4",
"value": 66,
"timeStamp": "2020-05-01T11:32:00.000Z",
"color": "red",
"raw": 2,
"key-type": "posicion 2"
},{
"deviceID": 3,
"name": "dev3",
"value": 57,
"timeStamp": "2020-05-01T11:40:00.000Z",
"color": "red",
"raw": 2,
"key-type": "posicion 2"
},{
"deviceID": 1,
"name": "dev1",
"value": 92,
"timeStamp": "2020-05-01T11:45:00.000Z",
"color": "red",
"raw": 2,
"key-type": "posicion 2"
},{
"deviceID": 3,
"name": "dev3",
"value": 45,
"timeStamp": "2020-05-01T11:55:00.000Z",
"color": "red",
"raw": 3,
"key-type": "posicion 3"
},{
"deviceID": 1,
"name": "dev1",
"value": 40,
"timeStamp": "2020-05-01T12:03:00.000Z",
"color": "red",
"raw": 1,
"key-type": "posicion 1"
},{
"deviceID": 3,
"name": "dev3",
"value": 67,
"timeStamp": "2020-05-01T12:10:00.000Z",
"color": "red",
"raw": 3,
"key-type": "posicion 3"
},{
"deviceID": 4,
"name": "dev4",
"value": 45,
"timeStamp": "2020-05-01T12:19:00.000Z",
"color": "red",
"raw": 3,
"key-type": "posicion 3"
},{
"deviceID": 1,
"name": "dev1",
"value": 78,
"timeStamp": "2020-05-01T12:24:00.000Z",
"color": "red",
"raw": 2,
"key-type": "posicion 2"
},{
"deviceID": 1,
"name": "dev1",
"value": 31,
"timeStamp": "2020-05-01T12:30:00.000Z",
"color": "red",
"raw": 1,
"key-type": "posicion 1"
},{
"deviceID": 3,
"name": "dev3",
"value": 53,
"timeStamp": "2020-05-01T12:39:00.000Z",
"color": "red",
"raw": 2,
"key-type": "posicion 2"
},{
"deviceID": 1,
"name": "dev1",
"value": 69,
"timeStamp": "2020-05-01T12:47:00.000Z",
"color": "red",
"raw": 2,
"key-type": "posicion 2"
},{
"deviceID": 3,
"name": "dev3",
"value": 71,
"timeStamp": "2020-05-01T12:52:00.000Z",
"color": "red",
"raw": 1,
"key-type": "posicion 1"
}]
am4core.useTheme(am4themes_animated);
// Themes end
var chart = am4core.create("divStockPrices", am4charts.XYChart);
chart.padding(0, 15, 0, 15);
chart.colors.step = 3;
chart.cursor = new am4charts.XYCursor();
let msje = `
<center><strong><a href=LINK>NAME</a> {categoryX}</strong></center>
<hr />
<table>
<tr>
<th align="left">Value</th>
<td>ACTUAL%</td>
</tr>
</table>
<hr />`
function prepareData(data) {
let datas = {};
datas.length = 0;
for (let i = 0; i < data.length; i++) {
let miBool = false;
ids = Object.keys(datas)
for (let j = 0; j < ids.length; j++) {
if (data[i].deviceID == ids[j]) miBool = true;
}
if (!miBool) {
datas[data[i].deviceID] = [data[i]]
datas.length += 1;
} else datas[data[i].deviceID].push(data[i])
}
return datas;
}
var quantity = 1000;
let data2 = prepareData(data);
//chart.data = data2;
// the following line makes value axes to be arranged vertically.
chart.leftAxesContainer.layout = "vertical";
// uncomment this line if you want to change order of axes
//chart.bottomAxesContainer.reverseOrder = true;
var dateAxis = chart.xAxes.push(new am4charts.DateAxis());
dateAxis.renderer.grid.template.location = 0;
dateAxis.renderer.ticks.template.length = 8;
dateAxis.renderer.ticks.template.strokeOpacity = 0.1;
dateAxis.renderer.grid.template.disabled = true;
dateAxis.renderer.ticks.template.disabled = false;
dateAxis.renderer.ticks.template.strokeOpacity = 0.2;
dateAxis.renderer.minLabelPosition = 0.01;
dateAxis.renderer.maxLabelPosition = 0.99;
dateAxis.keepSelection = true;
dateAxis.baseInterval = {
"timeUnit": "minute",
"count": 1
};
dateAxis.groupIntervals.setAll([
{ timeUnit: "minute", count: 1 },
{ timeUnit: "minute", count: 5 },
{ timeUnit: "minute", count: 10 },
{ timeUnit: "minute", count: 15 },
{ timeUnit: "minute", count: 30 },
{ timeUnit: "hour", count: 1 },
{ timeUnit: "hour", count: 3 },
{ timeUnit: "hour", count: 6 },
{ timeUnit: "hour", count: 12 },
{ timeUnit: "day", count: 1 },
{ timeUnit: "day", count: 2 },
{ timeUnit: "day", count: 3 },
{ timeUnit: "day", count: 4 },
{ timeUnit: "day", count: 5 },
{ timeUnit: "week", count: 1 },
{ timeUnit: "month", count: 1 },
{ timeUnit: "month", count: 2 },
{ timeUnit: "month", count: 3 },
{ timeUnit: "month", count: 6 },
{ timeUnit: "year", count: 1 },
{ timeUnit: "year", count: 2 },
{ timeUnit: "year", count: 5 },
{ timeUnit: "year", count: 10 },
{ timeUnit: "year", count: 50 },
{ timeUnit: "year", count: 100 },
{ timeUnit: "year", count: 200 },
{ timeUnit: "year", count: 500 }
]);
dateAxis.groupData = true;
var valueAxis = chart.yAxes.push(new am4charts.ValueAxis());
valueAxis.tooltip.disabled = true;
valueAxis.zIndex = 1;
valueAxis.renderer.baseGrid.disabled = true;
// height of axis
valueAxis.height = am4core.percent(65);
valueAxis.renderer.gridContainer.background.fill = am4core.color("#000000");
valueAxis.renderer.gridContainer.background.fillOpacity = 0.05;
valueAxis.renderer.inside = true;
valueAxis.renderer.labels.template.verticalCenter = "bottom";
valueAxis.renderer.labels.template.padding(2, 2, 2, 2);
//valueAxis.renderer.maxLabelPosition = 0.95;
valueAxis.renderer.fontSize = "0.8em"
let series = []
for (let i = 0; i < data2.length; i++) {
series.push(chart.series.push(new am4charts.LineSeries()));
series[i].dataFields.dateX = "timeStamp";
series[i].dataFields.valueY = "value";
//series[i].dataFields.valueYShow = "changePercent";
//series[i].tooltipText = "{name}: {valueY.changePercent.formatNumber('[#0c0]+#.00|[#c00]#.##|0')}%";
series[i].name = "Stock A";
series[i].tooltip.getFillFromObject = false;
series[i].tooltip.getStrokeFromObject = true;
series[i].tooltip.background.fill = am4core.color("#fff");
series[i].tooltip.background.strokeWidth = 2;
series[i].tooltip.label.fill = series[i].stroke;
series[i].data = data2[i];
series[i].tensionX = 0.9;
let bullet = series[i].bullets.push(new am4charts.Bullet());
// Maneja el texto a mostrar cuando se posa el mouse encima
bullet.tooltipHTML = msje.replace('ACTUAL', "{value}").replace('LINK', "").replace('NAME', "{name}");
// Modifica el marcador para ser un circulo con el formato especificado
let circle = bullet.createChild(am4core.Circle);
circle.width = 3;
circle.height = 3;
circle.horizontalCenter = "middle";
circle.verticalCenter = "middle";
circle.stroke = am4core.color("#999999");
circle.strokeWidth = 2;
circle.fill = am4core.color("{color}");
}
function customizeGrip(grip) {
grip.icon.disabled = true;
grip.background.disabled = true;
}
var scrollbarX = new am4charts.XYChartScrollbar();
for (let i = 0; i < data2.length; i++) {
scrollbarX.series.push(series[i]);
}
customizeGrip(scrollbarX.startGrip);
customizeGrip(scrollbarX.endGrip);
scrollbarX.marginBottom = 20;
var sbSeries = scrollbarX.scrollbarChart.series.getIndex(0);
sbSeries.dataFields.valueYShow = undefined;
chart.scrollbarX = scrollbarX;<style>
.graphContainer {
width: 500px;
height: 500px;
}
#chartdata {
max-height: 400px;
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>解决方案
默认情况下，AmCharts 解析yyyy-MM-dd没有时间戳的日期。您需要修改图表 dateFormatter 的inputDateFormat属性以匹配您的日期+时间戳格式，如此处所述。由于您使用的是 ISO 格式，'i'因此就足够了。
chart.dateFormatter.inputDateFormat = 'i';
更新代码如下：
data = [{
"deviceID": 4,
"name": "dev4",
"value": 63,
"timeStamp": "2020-05-01T00:38:00.000Z",
"color": "red",
"raw": 3,
"key-type": "posicion 3"
},{
"deviceID": 4,
"name": "dev4",
"value": 31,
"timeStamp": "2020-05-01T00:44:00.000Z",
"color": "red",
"raw": 1,
"key-type": "posicion 1"
},{
"deviceID": 3,
"name": "dev3",
"value": 72,
"timeStamp": "2020-05-01T00:54:00.000Z",
"color": "red",
"raw": 3,
"key-type": "posicion 3"
},{
"deviceID": 3,
"name": "dev3",
"value": 67,
"timeStamp": "2020-05-01T01:01:00.000Z",
"color": "red",
"raw": 3,
"key-type": "posicion 3"
},{
"deviceID": 2,
"name": "dev2",
"value": 76,
"timeStamp": "2020-05-01T01:11:00.000Z",
"color": "red",
"raw": 3,
"key-type": "posicion 3"
},{
"deviceID": 4,
"name": "dev4",
"value": 38,
"timeStamp": "2020-05-01T01:18:00.000Z",
"color": "red",
"raw": 2,
"key-type": "posicion 2"
},{
"deviceID": 2,
"name": "dev2",
"value": 40,
"timeStamp": "2020-05-01T01:28:00.000Z",
"color": "red",
"raw": 1,
"key-type": "posicion 1"
},{
"deviceID": 1,
"name": "dev1",
"value": 97,
"timeStamp": "2020-05-01T01:38:00.000Z",
"color": "red",
"raw": 1,
"key-type": "posicion 1"
},{
"deviceID": 1,
"name": "dev1",
"value": 61,
"timeStamp": "2020-05-01T01:43:00.000Z",
"color": "red",
"raw": 1,
"key-type": "posicion 1"
},{
"deviceID": 1,
"name": "dev1",
"value": 35,
"timeStamp": "2020-05-01T01:50:00.000Z",
"color": "red",
"raw": 1,
"key-type": "posicion 1"
},{
"deviceID": 2,
"name": "dev2",
"value": 30,
"timeStamp": "2020-05-01T01:58:00.000Z",
"color": "red",
"raw": 1,
"key-type": "posicion 1"
},{
"deviceID": 1,
"name": "dev1",
"value": 73,
"timeStamp": "2020-05-01T02:03:00.000Z",
"color": "red",
"raw": 3,
"key-type": "posicion 3"
},{
"deviceID": 4,
"name": "dev4",
"value": 42,
"timeStamp": "2020-05-01T02:09:00.000Z",
"color": "red",
"raw": 3,
"key-type": "posicion 3"
},{
"deviceID": 2,
"name": "dev2",
"value": 90,
"timeStamp": "2020-05-01T02:15:00.000Z",
"color": "red",
"raw": 1,
"key-type": "posicion 1"
},{
"deviceID": 1,
"name": "dev1",
"value": 86,
"timeStamp": "2020-05-01T02:20:00.000Z",
"color": "red",
"raw": 1,
"key-type": "posicion 1"
},{
"deviceID": 2,
"name": "dev2",
"value": 69,
"timeStamp": "2020-05-01T02:25:00.000Z",
"color": "red",
"raw": 3,
"key-type": "posicion 3"
},{
"deviceID": 2,
"name": "dev2",
"value": 78,
"timeStamp": "2020-05-01T02:33:00.000Z",
"color": "red",
"raw": 3,
"key-type": "posicion 3"
},{
"deviceID": 4,
"name": "dev4",
"value": 55,
"timeStamp": "2020-05-01T02:40:00.000Z",
"color": "red",
"raw": 1,
"key-type": "posicion 1"
},{
"deviceID": 4,
"name": "dev4",
"value": 38,
"timeStamp": "2020-05-01T02:49:00.000Z",
"color": "red",
"raw": 3,
"key-type": "posicion 3"
},{
"deviceID": 2,
"name": "dev2",
"value": 39,
"timeStamp": "2020-05-01T02:58:00.000Z",
"color": "red",
"raw": 2,
"key-type": "posicion 2"
},{
"deviceID": 4,
"name": "dev4",
"value": 50,
"timeStamp": "2020-05-01T03:04:00.000Z",
"color": "red",
"raw": 3,
"key-type": "posicion 3"
},{
"deviceID": 4,
"name": "dev4",
"value": 31,
"timeStamp": "2020-05-01T03:10:00.000Z",
"color": "red",
"raw": 3,
"key-type": "posicion 3"
},{
"deviceID": 1,
"name": "dev1",
"value": 31,
"timeStamp": "2020-05-01T03:20:00.000Z",
"color": "red",
"raw": 2,
"key-type": "posicion 2"
},{
"deviceID": 3,
"name": "dev3",
"value": 86,
"timeStamp": "2020-05-01T03:30:00.000Z",
"color": "red",
"raw": 3,
"key-type": "posicion 3"
},{
"deviceID": 3,
"name": "dev3",
"value": 44,
"timeStamp": "2020-05-01T03:38:00.000Z",
"color": "red",
"raw": 3,
"key-type": "posicion 3"
},{
"deviceID": 4,
"name": "dev4",
"value": 31,
"timeStamp": "2020-05-01T03:46:00.000Z",
"color": "red",
"raw": 1,
"key-type": "posicion 1"
},{
"deviceID": 1,
"name": "dev1",
"value": 45,
"timeStamp": "2020-05-01T03:51:00.000Z",
"color": "red",
"raw": 2,
"key-type": "posicion 2"
},{
"deviceID": 4,
"name": "dev4",
"value": 34,
"timeStamp": "2020-05-01T03:59:00.000Z",
"color": "red",
"raw": 3,
"key-type": "posicion 3"
},{
"deviceID": 2,
"name": "dev2",
"value": 83,
"timeStamp": "2020-05-01T04:09:00.000Z",
"color": "red",
"raw": 3,
"key-type": "posicion 3"
},{
"deviceID": 1,
"name": "dev1",
"value": 32,
"timeStamp": "2020-05-01T04:18:00.000Z",
"color": "red",
"raw": 3,
"key-type": "posicion 3"
},{
"deviceID": 2,
"name": "dev2",
"value": 58,
"timeStamp": "2020-05-01T04:28:00.000Z",
"color": "red",
"raw": 3,
"key-type": "posicion 3"
},{
"deviceID": 1,
"name": "dev1",
"value": 68,
"timeStamp": "2020-05-01T04:35:00.000Z",
"color": "red",
"raw": 2,
"key-type": "posicion 2"
},{
"deviceID": 1,
"name": "dev1",
"value": 78,
"timeStamp": "2020-05-01T04:41:00.000Z",
"color": "red",
"raw": 3,
"key-type": "posicion 3"
},{
"deviceID": 1,
"name": "dev1",
"value": 98,
"timeStamp": "2020-05-01T04:49:00.000Z",
"color": "red",
"raw": 1,
"key-type": "posicion 1"
},{
"deviceID": 3,
"name": "dev3",
"value": 69,
"timeStamp": "2020-05-01T04:56:00.000Z",
"color": "red",
"raw": 3,
"key-type": "posicion 3"
},{
"deviceID": 2,
"name": "dev2",
"value": 52,
"timeStamp": "2020-05-01T05:03:00.000Z",
"color": "red",
"raw": 1,
"key-type": "posicion 1"
},{
"deviceID": 2,
"name": "dev2",
"value": 88,
"timeStamp": "2020-05-01T05:10:00.000Z",
"color": "red",
"raw": 2,
"key-type": "posicion 2"
},{
"deviceID": 4,
"name": "dev4",
"value": 67,
"timeStamp": "2020-05-01T05:20:00.000Z",
"color": "red",
"raw": 2,
"key-type": "posicion 2"
},{
"deviceID": 1,
"name": "dev1",
"value": 34,
"timeStamp": "2020-05-01T05:28:00.000Z",
"color": "red",
"raw": 3,
"key-type": "posicion 3"
},{
"deviceID": 4,
"name": "dev4",
"value": 60,
"timeStamp": "2020-05-01T05:37:00.000Z",
"color": "red",
"raw": 2,
"key-type": "posicion 2"
},{
"deviceID": 4,
"name": "dev4",
"value": 66,
"timeStamp": "2020-05-01T05:44:00.000Z",
"color": "red",
"raw": 1,
"key-type": "posicion 1"
},{
"deviceID": 4,
"name": "dev4",
"value": 64,
"timeStamp": "2020-05-01T05:50:00.000Z",
"color": "red",
"raw": 3,
"key-type": "posicion 3"
},{
"deviceID": 4,
"name": "dev4",
"value": 96,
"timeStamp": "2020-05-01T05:59:00.000Z",
"color": "red",
"raw": 3,
"key-type": "posicion 3"
},{
"deviceID": 4,
"name": "dev4",
"value": 38,
"timeStamp": "2020-05-01T06:05:00.000Z",
"color": "red",
"raw": 3,
"key-type": "posicion 3"
},{
"deviceID": 4,
"name": "dev4",
"value": 46,
"timeStamp": "2020-05-01T06:11:00.000Z",
"color": "red",
"raw": 3,
"key-type": "posicion 3"
},{
"deviceID": 4,
"name": "dev4",
"value": 32,
"timeStamp": "2020-05-01T06:17:00.000Z",
"color": "red",
"raw": 2,
"key-type": "posicion 2"
},{
"deviceID": 1,
"name": "dev1",
"value": 54,
"timeStamp": "2020-05-01T06:22:00.000Z",
"color": "red",
"raw": 2,
"key-type": "posicion 2"
},{
"deviceID": 3,
"name": "dev3",
"value": 38,
"timeStamp": "2020-05-01T06:28:00.000Z",
"color": "red",
"raw": 3,
"key-type": "posicion 3"
},{
"deviceID": 3,
"name": "dev3",
"value": 49,
"timeStamp": "2020-05-01T06:35:00.000Z",
"color": "red",
"raw": 1,
"key-type": "posicion 1"
},{
"deviceID": 3,
"name": "dev3",
"value": 51,
"timeStamp": "2020-05-01T06:45:00.000Z",
"color": "red",
"raw": 1,
"key-type": "posicion 1"
},{
"deviceID": 3,
"name": "dev3",
"value": 33,
"timeStamp": "2020-05-01T06:52:00.000Z",
"color": "red",
"raw": 3,
"key-type": "posicion 3"
},{
"deviceID": 4,
"name": "dev4",
"value": 65,
"timeStamp": "2020-05-01T07:00:00.000Z",
"color": "red",
"raw": 1,
"key-type": "posicion 1"
},{
"deviceID": 3,
"name": "dev3",
"value": 84,
"timeStamp": "2020-05-01T07:05:00.000Z",
"color": "red",
"raw": 2,
"key-type": "posicion 2"
},{
"deviceID": 2,
"name": "dev2",
"value": 81,
"timeStamp": "2020-05-01T07:10:00.000Z",
"color": "red",
"raw": 2,
"key-type": "posicion 2"
},{
"deviceID": 3,
"name": "dev3",
"value": 87,
"timeStamp": "2020-05-01T07:17:00.000Z",
"color": "red",
"raw": 2,
"key-type": "posicion 2"
},{
"deviceID": 3,
"name": "dev3",
"value": 85,
"timeStamp": "2020-05-01T07:23:00.000Z",
"color": "red",
"raw": 2,
"key-type": "posicion 2"
},{
"deviceID": 2,
"name": "dev2",
"value": 94,
"timeStamp": "2020-05-01T07:33:00.000Z",
"color": "red",
"raw": 3,
"key-type": "posicion 3"
},{
"deviceID": 1,
"name": "dev1",
"value": 73,
"timeStamp": "2020-05-01T07:39:00.000Z",
"color": "red",
"raw": 3,
"key-type": "posicion 3"
},{
"deviceID": 3,
"name": "dev3",
"value": 93,
"timeStamp": "2020-05-01T07:45:00.000Z",
"color": "red",
"raw": 1,
"key-type": "posicion 1"
},{
"deviceID": 4,
"name": "dev4",
"value": 84,
"timeStamp": "2020-05-01T07:50:00.000Z",
"color": "red",
"raw": 1,
"key-type": "posicion 1"
},{
"deviceID": 4,
"name": "dev4",
"value": 75,
"timeStamp": "2020-05-01T07:59:00.000Z",
"color": "red",
"raw": 2,
"key-type": "posicion 2"
},{
"deviceID": 1,
"name": "dev1",
"value": 53,
"timeStamp": "2020-05-01T08:07:00.000Z",
"color": "red",
"raw": 2,
"key-type": "posicion 2"
},{
"deviceID": 4,
"name": "dev4",
"value": 98,
"timeStamp": "2020-05-01T08:13:00.000Z",
"color": "red",
"raw": 1,
"key-type": "posicion 1"
},{
"deviceID": 4,
"name": "dev4",
"value": 40,
"timeStamp": "2020-05-01T08:22:00.000Z",
"color": "red",
"raw": 3,
"key-type": "posicion 3"
},{
"deviceID": 1,
"name": "dev1",
"value": 83,
"timeStamp": "2020-05-01T08:31:00.000Z",
"color": "red",
"raw": 3,
"key-type": "posicion 3"
},{
"deviceID": 3,
"name": "dev3",
"value": 77,
"timeStamp": "2020-05-01T08:38:00.000Z",
"color": "red",
"raw": 3,
"key-type": "posicion 3"
},{
"deviceID": 2,
"name": "dev2",
"value": 91,
"timeStamp": "2020-05-01T08:48:00.000Z",
"color": "red",
"raw": 3,
"key-type": "posicion 3"
},{
"deviceID": 1,
"name": "dev1",
"value": 96,
"timeStamp": "2020-05-01T08:54:00.000Z",
"color": "red",
"raw": 3,
"key-type": "posicion 3"
},{
"deviceID": 3,
"name": "dev3",
"value": 87,
"timeStamp": "2020-05-01T08:59:00.000Z",
"color": "red",
"raw": 3,
"key-type": "posicion 3"
},{
"deviceID": 3,
"name": "dev3",
"value": 99,
"timeStamp": "2020-05-01T09:05:00.000Z",
"color": "red",
"raw": 1,
"key-type": "posicion 1"
},{
"deviceID": 1,
"name": "dev1",
"value": 49,
"timeStamp": "2020-05-01T09:10:00.000Z",
"color": "red",
"raw": 2,
"key-type": "posicion 2"
},{
"deviceID": 3,
"name": "dev3",
"value": 90,
"timeStamp": "2020-05-01T09:20:00.000Z",
"color": "red",
"raw": 3,
"key-type": "posicion 3"
},{
"deviceID": 4,
"name": "dev4",
"value": 38,
"timeStamp": "2020-05-01T09:30:00.000Z",
"color": "red",
"raw": 3,
"key-type": "posicion 3"
},{
"deviceID": 1,
"name": "dev1",
"value": 52,
"timeStamp": "2020-05-01T09:40:00.000Z",
"color": "red",
"raw": 1,
"key-type": "posicion 1"
},{
"deviceID": 4,
"name": "dev4",
"value": 66,
"timeStamp": "2020-05-01T09:45:00.000Z",
"color": "red",
"raw": 1,
"key-type": "posicion 1"
},{
"deviceID": 1,
"name": "dev1",
"value": 96,
"timeStamp": "2020-05-01T09:50:00.000Z",
"color": "red",
"raw": 3,
"key-type": "posicion 3"
},{
"deviceID": 3,
"name": "dev3",
"value": 54,
"timeStamp": "2020-05-01T09:58:00.000Z",
"color": "red",
"raw": 1,
"key-type": "posicion 1"
},{
"deviceID": 4,
"name": "dev4",
"value": 67,
"timeStamp": "2020-05-01T10:03:00.000Z",
"color": "red",
"raw": 2,
"key-type": "posicion 2"
},{
"deviceID": 4,
"name": "dev4",
"value": 35,
"timeStamp": "2020-05-01T10:09:00.000Z",
"color": "red",
"raw": 2,
"key-type": "posicion 2"
},{
"deviceID": 2,
"name": "dev2",
"value": 94,
"timeStamp": "2020-05-01T10:17:00.000Z",
"color": "red",
"raw": 1,
"key-type": "posicion 1"
},{
"deviceID": 1,
"name": "dev1",
"value": 61,
"timeStamp": "2020-05-01T10:26:00.000Z",
"color": "red",
"raw": 3,
"key-type": "posicion 3"
},{
"deviceID": 4,
"name": "dev4",
"value": 46,
"timeStamp": "2020-05-01T10:36:00.000Z",
"color": "red",
"raw": 1,
"key-type": "posicion 1"
},{
"deviceID": 4,
"name": "dev4",
"value": 45,
"timeStamp": "2020-05-01T10:45:00.000Z",
"color": "red",
"raw": 3,
"key-type": "posicion 3"
},{
"deviceID": 4,
"name": "dev4",
"value": 91,
"timeStamp": "2020-05-01T10:50:00.000Z",
"color": "red",
"raw": 1,
"key-type": "posicion 1"
},{
"deviceID": 1,
"name": "dev1",
"value": 68,
"timeStamp": "2020-05-01T10:56:00.000Z",
"color": "red",
"raw": 2,
"key-type": "posicion 2"
},{
"deviceID": 2,
"name": "dev2",
"value": 61,
"timeStamp": "2020-05-01T11:01:00.000Z",
"color": "red",
"raw": 2,
"key-type": "posicion 2"
},{
"deviceID": 3,
"name": "dev3",
"value": 78,
"timeStamp": "2020-05-01T11:11:00.000Z",
"color": "red",
"raw": 1,
"key-type": "posicion 1"
},{
"deviceID": 2,
"name": "dev2",
"value": 60,
"timeStamp": "2020-05-01T11:18:00.000Z",
"color": "red",
"raw": 2,
"key-type": "posicion 2"
},{
"deviceID": 2,
"name": "dev2",
"value": 76,
"timeStamp": "2020-05-01T11:25:00.000Z",
"color": "red",
"raw": 3,
"key-type": "posicion 3"
},{
"deviceID": 4,
"name": "dev4",
"value": 66,
"timeStamp": "2020-05-01T11:32:00.000Z",
"color": "red",
"raw": 2,
"key-type": "posicion 2"
},{
"deviceID": 3,
"name": "dev3",
"value": 57,
"timeStamp": "2020-05-01T11:40:00.000Z",
"color": "red",
"raw": 2,
"key-type": "posicion 2"
},{
"deviceID": 1,
"name": "dev1",
"value": 92,
"timeStamp": "2020-05-01T11:45:00.000Z",
"color": "red",
"raw": 2,
"key-type": "posicion 2"
},{
"deviceID": 3,
"name": "dev3",
"value": 45,
"timeStamp": "2020-05-01T11:55:00.000Z",
"color": "red",
"raw": 3,
"key-type": "posicion 3"
},{
"deviceID": 1,
"name": "dev1",
"value": 40,
"timeStamp": "2020-05-01T12:03:00.000Z",
"color": "red",
"raw": 1,
"key-type": "posicion 1"
},{
"deviceID": 3,
"name": "dev3",
"value": 67,
"timeStamp": "2020-05-01T12:10:00.000Z",
"color": "red",
"raw": 3,
"key-type": "posicion 3"
},{
"deviceID": 4,
"name": "dev4",
"value": 45,
"timeStamp": "2020-05-01T12:19:00.000Z",
"color": "red",
"raw": 3,
"key-type": "posicion 3"
},{
"deviceID": 1,
"name": "dev1",
"value": 78,
"timeStamp": "2020-05-01T12:24:00.000Z",
"color": "red",
"raw": 2,
"key-type": "posicion 2"
},{
"deviceID": 1,
"name": "dev1",
"value": 31,
"timeStamp": "2020-05-01T12:30:00.000Z",
"color": "red",
"raw": 1,
"key-type": "posicion 1"
},{
"deviceID": 3,
"name": "dev3",
"value": 53,
"timeStamp": "2020-05-01T12:39:00.000Z",
"color": "red",
"raw": 2,
"key-type": "posicion 2"
},{
"deviceID": 1,
"name": "dev1",
"value": 69,
"timeStamp": "2020-05-01T12:47:00.000Z",
"color": "red",
"raw": 2,
"key-type": "posicion 2"
},{
"deviceID": 3,
"name": "dev3",
"value": 71,
"timeStamp": "2020-05-01T12:52:00.000Z",
"color": "red",
"raw": 1,
"key-type": "posicion 1"
}]
am4core.useTheme(am4themes_animated);
// Themes end
var chart = am4core.create("divStockPrices", am4charts.XYChart);
chart.padding(0, 15, 0, 15);
chart.colors.step = 3;
chart.dateFormatter.inputDateFormat = 'i';
chart.cursor = new am4charts.XYCursor();
let msje = `
<center><strong><a href=LINK>NAME</a> {categoryX}</strong></center>
<hr />
<table>
<tr>
<th align="left">Value</th>
<td>ACTUAL%</td>
</tr>
</table>
<hr />`
function prepareData(data) {
let datas = {};
datas.length = 0;
for (let i = 0; i < data.length; i++) {
let miBool = false;
ids = Object.keys(datas)
for (let j = 0; j < ids.length; j++) {
if (data[i].deviceID == ids[j]) miBool = true;
}
if (!miBool) {
datas[data[i].deviceID] = [data[i]]
datas.length += 1;
} else datas[data[i].deviceID].push(data[i])
}
return datas;
}
var quantity = 1000;
let data2 = prepareData(data);
//chart.data = data2;
// the following line makes value axes to be arranged vertically.
chart.leftAxesContainer.layout = "vertical";
// uncomment this line if you want to change order of axes
//chart.bottomAxesContainer.reverseOrder = true;
var dateAxis = chart.xAxes.push(new am4charts.DateAxis());
dateAxis.renderer.grid.template.location = 0;
dateAxis.renderer.ticks.template.length = 8;
dateAxis.renderer.ticks.template.strokeOpacity = 0.1;
dateAxis.renderer.grid.template.disabled = true;
dateAxis.renderer.ticks.template.disabled = false;
dateAxis.renderer.ticks.template.strokeOpacity = 0.2;
dateAxis.renderer.minLabelPosition = 0.01;
dateAxis.renderer.maxLabelPosition = 0.99;
dateAxis.keepSelection = true;
dateAxis.baseInterval = {
"timeUnit": "minute",
"count": 1
};
dateAxis.groupIntervals.setAll([
{ timeUnit: "minute", count: 1 },
{ timeUnit: "minute", count: 5 },
{ timeUnit: "minute", count: 10 },
{ timeUnit: "minute", count: 15 },
{ timeUnit: "minute", count: 30 },
{ timeUnit: "hour", count: 1 },
{ timeUnit: "hour", count: 3 },
{ timeUnit: "hour", count: 6 },
{ timeUnit: "hour", count: 12 },
{ timeUnit: "day", count: 1 },
{ timeUnit: "day", count: 2 },
{ timeUnit: "day", count: 3 },
{ timeUnit: "day", count: 4 },
{ timeUnit: "day", count: 5 },
{ timeUnit: "week", count: 1 },
{ timeUnit: "month", count: 1 },
{ timeUnit: "month", count: 2 },
{ timeUnit: "month", count: 3 },
{ timeUnit: "month", count: 6 },
{ timeUnit: "year", count: 1 },
{ timeUnit: "year", count: 2 },
{ timeUnit: "year", count: 5 },
{ timeUnit: "year", count: 10 },
{ timeUnit: "year", count: 50 },
{ timeUnit: "year", count: 100 },
{ timeUnit: "year", count: 200 },
{ timeUnit: "year", count: 500 }
]);
dateAxis.groupData = true;
var valueAxis = chart.yAxes.push(new am4charts.ValueAxis());
valueAxis.tooltip.disabled = true;
valueAxis.zIndex = 1;
valueAxis.renderer.baseGrid.disabled = true;
// height of axis
valueAxis.height = am4core.percent(65);
valueAxis.renderer.gridContainer.background.fill = am4core.color("#000000");
valueAxis.renderer.gridContainer.background.fillOpacity = 0.05;
valueAxis.renderer.inside = true;
valueAxis.renderer.labels.template.verticalCenter = "bottom";
valueAxis.renderer.labels.template.padding(2, 2, 2, 2);
//valueAxis.renderer.maxLabelPosition = 0.95;
valueAxis.renderer.fontSize = "0.8em"
let series = []
for (let i = 0; i < data2.length; i++) {
series.push(chart.series.push(new am4charts.LineSeries()));
series[i].dataFields.dateX = "timeStamp";
series[i].dataFields.valueY = "value";
//series[i].dataFields.valueYShow = "changePercent";
//series[i].tooltipText = "{name}: {valueY.changePercent.formatNumber('[#0c0]+#.00|[#c00]#.##|0')}%";
series[i].name = "Stock A";
series[i].tooltip.getFillFromObject = false;
series[i].tooltip.getStrokeFromObject = true;
series[i].tooltip.background.fill = am4core.color("#fff");
series[i].tooltip.background.strokeWidth = 2;
series[i].tooltip.label.fill = series[i].stroke;
series[i].data = data2[i];
series[i].tensionX = 0.9;
let bullet = series[i].bullets.push(new am4charts.Bullet());
// Maneja el texto a mostrar cuando se posa el mouse encima
bullet.tooltipHTML = msje.replace('ACTUAL', "{value}").replace('LINK', "").replace('NAME', "{name}");
// Modifica el marcador para ser un circulo con el formato especificado
let circle = bullet.createChild(am4core.Circle);
circle.width = 3;
circle.height = 3;
circle.horizontalCenter = "middle";
circle.verticalCenter = "middle";
circle.stroke = am4core.color("#999999");
circle.strokeWidth = 2;
circle.fill = am4core.color("{color}");
}
function customizeGrip(grip) {
grip.icon.disabled = true;
grip.background.disabled = true;
}
var scrollbarX = new am4charts.XYChartScrollbar();
for (let i = 0; i < data2.length; i++) {
scrollbarX.series.push(series[i]);
}
customizeGrip(scrollbarX.startGrip);
customizeGrip(scrollbarX.endGrip);
scrollbarX.marginBottom = 20;
var sbSeries = scrollbarX.scrollbarChart.series.getIndex(0);
sbSeries.dataFields.valueYShow = undefined;
chart.scrollbarX = scrollbarX;<style>
.graphContainer {
width: 500px;
height: 500px;
}
#chartdata {
max-height: 400px;
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>推荐阅读
- firebase - 通过 /__/firebase/init.js 为多个 Firebase 项目自动配置 Vue 应用
- vue-test-utils - 如何在测试 vuejs 组件时触发“模糊”事件？
- mysql - 在事先不知道行的情况下，MySQL 中的行到列
- apache-spark - Spark Streaming 中的 groupby 理想策略
- java - Java TCP 客户端-服务器连接：始终打开以侦听服务器
- php - 在多维json数组中添加所有具有匹配键的值
- java - Kotlin 可以和 openjdk 一起使用吗？
- rust - 如何更改 Arc 的值
在结构中？ - javascript - 为什么我的数组不能作为删除函数的参数？
- parquet - 尝试运行具有大量列的极其基本的 AWS-glue 爬虫时出现“内部服务异常”