带有日期时间轴的 AmCharts 在 2PM 之后显示 12PM

Question

我有一个带有日期时间类别轴的 chartJson，类别值作为字符串解析为日期时间值。dataDateFormat 提供为“YYYY-MM-DD LL:NN:SS A”，因为我的日期是上午/下午的 12 小时格式。12PM 的值在 2PM 值之后绘制，即使 12PM 出现在 2PM 之前。我怎样才能解决这个问题？代码笔链接：https ://codepen.io/shank9717/pen/xxxWMMN数据示例：“数据提供者”：[{  "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"}]"dataDateFormat": "YYYY-MM-DD LL:NN:SS A"

Answer 1

将日期字符串更改为实际日期值。

将图表数据分配给变量。

将每个日期字符串更改为一个日期，

然后将变量分配给图表选项中的数据提供者。

将图表数据分配给变量。

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>

Answer 2

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>