浮云间
默认情况下,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>