慕尼黑的夜晚无繁华
将日期字符串更改为实际日期值。将图表数据分配给变量。将每个日期字符串更改为一个日期,然后将变量分配给图表选项中的数据提供者。将图表数据分配给变量。var chartData = [ { "value1": "1", "alteredText": "2019-09-20 1...", "key": "2019-09-20 12:22:03 pm" }, { "value1": "2", "alteredText": "2019-09-20 0...", "key": "2019-09-20 01:24:03 pm" }, { "value1": "3", "alteredText": "2019-09-26 1...", "key": "2019-09-26 12:40:03 am" }, ...将每个日期字符串更改为日期chartData.forEach(function (row, index) { row.key = new Date(row.key); chartData[index] = row;});然后将变量分配给图表选项中的数据提供者。"dataProvider": chartData,请参阅以下工作片段...var chartData = [ { "value1": "1", "alteredText": "2019-09-20 1...", "key": "2019-09-20 12:22:03 pm" }, { "value1": "2", "alteredText": "2019-09-20 0...", "key": "2019-09-20 01:24:03 pm" }, { "value1": "3", "alteredText": "2019-09-26 1...", "key": "2019-09-26 12:40:03 am" }, { "value1": "4", "alteredText": "2019-10-11 1...", "key": "2019-10-11 12:09:09 pm" }, { "value1": "1004", "alteredText": "2019-10-11 0...", "key": "2019-10-11 02:53:20 pm" }, { "value1": "2004", "alteredText": "2019-10-11 0...", "key": "2019-10-11 03:35:31 pm" }, { "value1": "3004", "alteredText": "2019-10-12 0...", "key": "2019-10-12 03:06:21 pm" }, { "value1": "4004", "alteredText": "2019-10-13 0...", "key": "2019-10-13 03:57:25 pm" }, { "value1": "5004", "alteredText": "2019-10-13 0...", "key": "2019-10-13 04:33:30 pm" }, { "value1": "6004", "alteredText": "2019-10-13 0...", "key": "2019-10-13 04:57:14 pm" }, { "value1": "14009", "alteredText": "2019-10-13 0...", "key": "2019-10-13 06:50:11 pm" }, { "value1": "7006", "alteredText": "2019-10-13 0...", "key": "2019-10-13 07:35:02 pm" }, { "value1": "8004", "alteredText": "2019-10-14 1...", "key": "2019-10-14 11:49:04 am" }, { "value1": "8005", "alteredText": "2019-10-14 1...", "key": "2019-10-14 12:00:19 pm" }, { "value1": "16013", "alteredText": "2019-10-14 1...", "key": "2019-10-14 12:07:20 pm" }, { "value1": "18009", "alteredText": "2019-10-14 1...", "key": "2019-10-14 12:31:28 pm" }, { "value1": "9006", "alteredText": "2019-10-14 1...", "key": "2019-10-14 12:41:22 pm" }, { "value1": "20009", "alteredText": "2019-10-14 0...", "key": "2019-10-14 01:00:22 pm" }, { "value1": "22009", "alteredText": "2019-10-14 0...", "key": "2019-10-14 02:19:18 pm" }, { "value1": "12004", "alteredText": "2019-10-14 0...", "key": "2019-10-14 03:59:39 pm" }, { "value1": "13004", "alteredText": "2019-10-14 0...", "key": "2019-10-14 07:10:26 pm" }, { "value1": "13005", "alteredText": "2019-10-14 0...", "key": "2019-10-14 07:24:20 pm" }, { "value1": "14004", "alteredText": "2019-10-14 0...", "key": "2019-10-14 07:42:55 pm" }, { "value1": "15004", "alteredText": "2019-10-15 1...", "key": "2019-10-15 10:09:20 am" }, { "value1": "30011", "alteredText": "2019-10-15 1...", "key": "2019-10-15 10:18:20 am" }, { "value1": "15007", "alteredText": "2019-10-15 1...", "key": "2019-10-15 10:22:20 am" }, { "value1": "16004", "alteredText": "2019-10-15 0...", "key": "2019-10-15 01:04:33 pm" }, { "value1": "17004", "alteredText": "2019-10-15 0...", "key": "2019-10-15 03:22:05 pm" }, { "value1": "18004", "alteredText": "2019-10-15 0...", "key": "2019-10-15 08:06:00 pm" }, { "value1": "18005", "alteredText": "2019-10-15 0...", "key": "2019-10-15 08:13:22 pm" }, { "value1": "19004", "alteredText": "2019-10-15 0...", "key": "2019-10-15 08:31:22 pm" }, { "value1": "20004", "alteredText": "2019-10-15 0...", "key": "2019-10-15 09:04:32 pm" }, { "value1": "21004", "alteredText": "2019-10-15 0...", "key": "2019-10-15 09:25:24 pm" }, { "value1": "21005", "alteredText": "2019-10-15 0...", "key": "2019-10-15 09:34:19 pm" }, { "value1": "21006", "alteredText": "2019-10-15 0...", "key": "2019-10-15 09:44:19 pm" }, { "value1": "22004", "alteredText": "2019-10-16 0...", "key": "2019-10-16 09:52:22 am" }, { "value1": "23004", "alteredText": "2019-10-16 0...", "key": "2019-10-16 06:31:26 pm" }, { "value1": "23005", "alteredText": "2019-10-16 0...", "key": "2019-10-16 06:45:58 pm" }, { "value1": "23006", "alteredText": "2019-10-16 0...", "key": "2019-10-16 06:50:01 pm" }, { "value1": "24004", "alteredText": "2019-10-16 0...", "key": "2019-10-16 07:15:59 pm" }, { "value1": "24005", "alteredText": "2019-10-16 0...", "key": "2019-10-16 07:19:01 pm" }, { "value1": "48013", "alteredText": "2019-10-16 0...", "key": "2019-10-16 07:28:59 pm" }, { "value1": "25004", "alteredText": "2019-10-17 0...", "key": "2019-10-17 09:02:50 am" }, { "value1": "25005", "alteredText": "2019-10-17 0...", "key": "2019-10-17 09:08:02 am" }, { "value1": "26004", "alteredText": "2019-10-17 0...", "key": "2019-10-17 05:11:58 pm" }, { "value1": "27004", "alteredText": "2019-10-17 0...", "key": "2019-10-17 07:39:58 pm" }, { "value1": "28004", "alteredText": "2019-10-17 0...", "key": "2019-10-17 08:55:58 pm" } ];chartData.forEach(function (row, index) { row.key = new Date(row.key); chartData[index] = row;});var chart = AmCharts.makeChart( "chartdiv",{ "categoryAxis": { "axisAlpha": 1, "gridAlpha": 0, "parseDates": true, "gridPosition": "start", "minPeriod": "ss", "labelsEnabled": false, "position": "bottom", "autoWrap": true, "title": "xaxis" }, "rotate": false, "balloon": { "adjustBorderColor": false, "offsetX": 0, "offsetY": 0, "fixedPosition": true, "cornerRadius": 0, "maxWidth": 130 }, "allLabels": [ { "size": 13, "x": "8", "y": "-1", "bold": true, "text": "", "align": "left" } ], "valueAxes": [ { "gridAlpha": 0, "axisAlpha": 1, "offset": 0, "usePrefixes": true, "precision": 0, "labelsEnabled": true, "logarithmic": false, "position": "left", "id": "series1", "title": "yaxis" } ], "numberFormatter": { "precision": 0, "thousandsSeparator": "" }, "titles": [], "type": "serial", "dataDateFormat": "YYYY-MM-DD LL:NN:SS A", "chartScrollbar": { "oppositeAxis": false, "scrollbarHeight": 4 }, "categoryField": "key", "graphs": [ { "valueAxis": "series1", "maxBulletSize": 0, "lineColorField": "color1", "bulletSize": 5, "thickness": 2, "lineThickness": 2, "bulletColor": "#FFFFFF", "fillColorsField": "color1", "precision": 0, "lineColor": "#ef7b31", "useLineColorForBulletBorder": true, "fillColors": "#ef7b31", "valueField": "value1", "title": "clf_id", "balloonText": "<span style='font-size:11px'><b>[[value]]</b></span>", "minBulletSize": 0, "legendValueText": " ", "bulletBorderAlpha": 1, "hideBulletCount": 50, "noStepRisers": false, "bullet": "round", "labelRotation": 0, "connect": true } ], "fontFamily": "Arial", "responsive": { "enabled": true }, "usePrefixes": false, "theme": "light", "fontSize": 11, "dataProvider": chartData, "prefixesOfBigNumbers": [ { "number": "1000", "prefix": " K" }, { "number": "1000000", "prefix": " Mn" }, { "number": "1000000000", "prefix": " Bn" } ], "chartCursor": { "valueBalloonsEnabled": true, "oneBalloonOnly": true, "categoryBalloonEnabled": true, "cursorAlpha": 0 }, "addClassNames": true, "export": { "fileName": "Line Chart", "columnNames": { "key": "clf_polled_dttm" }, "exportFields": [ "key", "value1" ], "enabled": true }, "marginTop": 50});body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";}#chartdiv { width: 100%; height: 500px;}<script src="https://www.amcharts.com/lib/3/amcharts.js"></script><script src="https://www.amcharts.com/lib/3/serial.js"></script><script src="https://www.amcharts.com/lib/3/amstock.js"></script><script src="https://www.amcharts.com/lib/3/plugins/export/export.min.js"></script><link rel="stylesheet" href="https://www.amcharts.com/lib/3/plugins/export/export.css" type="text/css" media="all" /><div id="chartdiv"></div>
尚方宝剑之说
AmCharts V3并没有支持AM / PM和12小时日期格式dataDateFormat。注意:由星号LL和A和下面的注意事项:* dataDateFormat 设置不支持带星号的格式化代码。图表将无法解析数据中基于字符串的日期中的那些。您需要事先将数据转换为使用 24 小时格式,以便 AmCharts 使用 进行解析dataDateFormat,或者使用像 moment.js 这样的库将这些日期解析Date为 AmCharts 使用的对象。我建议不要Date按照 WhiteHat 的回答中的建议直接使用构造函数,因为规范仅保证ISO8601 或 RFC-2822 时间戳将起作用,而您的格式不太适合。如果您打算在数组上使用 moment,那么以下代码将起作用:[ /* your data array */].map(function(item) { return { "value1": item.value1, "alteredText": item.alteredText, "key": moment(item.key, "YYYY-MM-DD hh:mm a").toDate() } })演示如下:var chartData = [];var chart = AmCharts.makeChart( "chartdiv", { "categoryAxis": { "axisAlpha": 1, "gridAlpha": 0, "parseDates": true, "gridPosition": "start", "minPeriod": "ss", "labelsEnabled": false, "position": "bottom", "autoWrap": true, "title": "xaxis" }, "rotate": false, "balloon": { "adjustBorderColor": false, "offsetX": 0, "offsetY": 0, "fixedPosition": true, "cornerRadius": 0, "maxWidth": 130 }, "allLabels": [ { "size": 13, "x": "8", "y": "-1", "bold": true, "text": "", "align": "left" } ], "valueAxes": [ { "gridAlpha": 0, "axisAlpha": 1, "offset": 0, "usePrefixes": true, "precision": 0, "labelsEnabled": true, "logarithmic": false, "position": "left", "id": "series1", "title": "yaxis" } ], "numberFormatter": { "precision": 0, "thousandsSeparator": "" }, "titles": [], "type": "serial", //"dataDateFormat": "YYYY-MM-DD LL:NN:SS A", "chartScrollbar": { "oppositeAxis": false, "scrollbarHeight": 4 }, "categoryField": "key", "graphs": [ { "valueAxis": "series1", "maxBulletSize": 0, "lineColorField": "color1", "bulletSize": 5, "thickness": 2, "lineThickness": 2, "bulletColor": "#FFFFFF", "fillColorsField": "color1", "precision": 0, "lineColor": "#ef7b31", "useLineColorForBulletBorder": true, "fillColors": "#ef7b31", "valueField": "value1", "title": "clf_id", "balloonText": "<span style='font-size:11px'><b>[[value]]</b></span>", "minBulletSize": 0, "legendValueText": " ", "bulletBorderAlpha": 1, "hideBulletCount": 50, "noStepRisers": false, "bullet": "round", "labelRotation": 0, "connect": true } ], "fontFamily": "Arial", "responsive": { "enabled": true }, "usePrefixes": false, "theme": "light", "fontSize": 11, "dataProvider": [ { "value1": "1", "alteredText": "2019-09-20 1...", "key": "2019-09-20 12:22:03 pm" }, { "value1": "2", "alteredText": "2019-09-20 0...", "key": "2019-09-20 01:24:03 pm" }, { "value1": "3", "alteredText": "2019-09-26 1...", "key": "2019-09-26 12:40:03 am" }, { "value1": "4", "alteredText": "2019-10-11 1...", "key": "2019-10-11 12:09:09 pm" }, { "value1": "1004", "alteredText": "2019-10-11 0...", "key": "2019-10-11 02:53:20 pm" }, { "value1": "2004", "alteredText": "2019-10-11 0...", "key": "2019-10-11 03:35:31 pm" }, { "value1": "3004", "alteredText": "2019-10-12 0...", "key": "2019-10-12 03:06:21 pm" }, { "value1": "4004", "alteredText": "2019-10-13 0...", "key": "2019-10-13 03:57:25 pm" }, { "value1": "5004", "alteredText": "2019-10-13 0...", "key": "2019-10-13 04:33:30 pm" }, { "value1": "6004", "alteredText": "2019-10-13 0...", "key": "2019-10-13 04:57:14 pm" }, { "value1": "14009", "alteredText": "2019-10-13 0...", "key": "2019-10-13 06:50:11 pm" }, { "value1": "7006", "alteredText": "2019-10-13 0...", "key": "2019-10-13 07:35:02 pm" }, { "value1": "8004", "alteredText": "2019-10-14 1...", "key": "2019-10-14 11:49:04 am" }, { "value1": "8005", "alteredText": "2019-10-14 1...", "key": "2019-10-14 12:00:19 pm" }, { "value1": "16013", "alteredText": "2019-10-14 1...", "key": "2019-10-14 12:07:20 pm" }, { "value1": "18009", "alteredText": "2019-10-14 1...", "key": "2019-10-14 12:31:28 pm" }, { "value1": "9006", "alteredText": "2019-10-14 1...", "key": "2019-10-14 12:41:22 pm" }, { "value1": "20009", "alteredText": "2019-10-14 0...", "key": "2019-10-14 01:00:22 pm" }, { "value1": "22009", "alteredText": "2019-10-14 0...", "key": "2019-10-14 02:19:18 pm" }, { "value1": "12004", "alteredText": "2019-10-14 0...", "key": "2019-10-14 03:59:39 pm" }, { "value1": "13004", "alteredText": "2019-10-14 0...", "key": "2019-10-14 07:10:26 pm" }, { "value1": "13005", "alteredText": "2019-10-14 0...", "key": "2019-10-14 07:24:20 pm" }, { "value1": "14004", "alteredText": "2019-10-14 0...", "key": "2019-10-14 07:42:55 pm" }, { "value1": "15004", "alteredText": "2019-10-15 1...", "key": "2019-10-15 10:09:20 am" }, { "value1": "30011", "alteredText": "2019-10-15 1...", "key": "2019-10-15 10:18:20 am" }, { "value1": "15007", "alteredText": "2019-10-15 1...", "key": "2019-10-15 10:22:20 am" }, { "value1": "16004", "alteredText": "2019-10-15 0...", "key": "2019-10-15 01:04:33 pm" }, { "value1": "17004", "alteredText": "2019-10-15 0...", "key": "2019-10-15 03:22:05 pm" }, { "value1": "18004", "alteredText": "2019-10-15 0...", "key": "2019-10-15 08:06:00 pm" }, { "value1": "18005", "alteredText": "2019-10-15 0...", "key": "2019-10-15 08:13:22 pm" }, { "value1": "19004", "alteredText": "2019-10-15 0...", "key": "2019-10-15 08:31:22 pm" }, { "value1": "20004", "alteredText": "2019-10-15 0...", "key": "2019-10-15 09:04:32 pm" }, { "value1": "21004", "alteredText": "2019-10-15 0...", "key": "2019-10-15 09:25:24 pm" }, { "value1": "21005", "alteredText": "2019-10-15 0...", "key": "2019-10-15 09:34:19 pm" }, { "value1": "21006", "alteredText": "2019-10-15 0...", "key": "2019-10-15 09:44:19 pm" }, { "value1": "22004", "alteredText": "2019-10-16 0...", "key": "2019-10-16 09:52:22 am" }, { "value1": "23004", "alteredText": "2019-10-16 0...", "key": "2019-10-16 06:31:26 pm" }, { "value1": "23005", "alteredText": "2019-10-16 0...", "key": "2019-10-16 06:45:58 pm" }, { "value1": "23006", "alteredText": "2019-10-16 0...", "key": "2019-10-16 06:50:01 pm" }, { "value1": "24004", "alteredText": "2019-10-16 0...", "key": "2019-10-16 07:15:59 pm" }, { "value1": "24005", "alteredText": "2019-10-16 0...", "key": "2019-10-16 07:19:01 pm" }, { "value1": "48013", "alteredText": "2019-10-16 0...", "key": "2019-10-16 07:28:59 pm" }, { "value1": "25004", "alteredText": "2019-10-17 0...", "key": "2019-10-17 09:02:50 am" }, { "value1": "25005", "alteredText": "2019-10-17 0...", "key": "2019-10-17 09:08:02 am" }, { "value1": "26004", "alteredText": "2019-10-17 0...", "key": "2019-10-17 05:11:58 pm" }, { "value1": "27004", "alteredText": "2019-10-17 0...", "key": "2019-10-17 07:39:58 pm" }, { "value1": "28004", "alteredText": "2019-10-17 0...", "key": "2019-10-17 08:55:58 pm" } ].map(function(item) { return { "value1": item.value1, "alteredText": item.alteredText, "key": moment(item.key, "YYYY-MM-DD hh:mm a").toDate() } }), "prefixesOfBigNumbers": [ { "number": "1000", "prefix": " K" }, { "number": "1000000", "prefix": " Mn" }, { "number": "1000000000", "prefix": " Bn" } ], "chartCursor": { "valueBalloonsEnabled": true, "oneBalloonOnly": true, "categoryBalloonEnabled": true, "cursorAlpha": 0 }, "addClassNames": true, "export": { "fileName": "Line Chart", "columnNames": { "key": "clf_polled_dttm" }, "exportFields": [ "key", "value1" ], "enabled": true }, "marginTop": 50});#chartdiv { width: 100%; height: 500px;}<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.24.0/moment.min.js"></script><script src="https://www.amcharts.com/lib/3/amcharts.js"></script><script src="https://www.amcharts.com/lib/3/serial.js"></script><script src="https://www.amcharts.com/lib/3/plugins/export/export.min.js"></script><link rel="stylesheet" href="https://www.amcharts.com/lib/3/plugins/export/export.css" type="text/css" media="all" /><div id="chartdiv"></div>