前端之家

  1. 首页
  2. 问答

AmCharts，日期时间轴在2PM之后显示12PM

• 问答

我有一个带有日期时间类别轴的chartJson，类别值作为字符串被解析为日期时间值。 dataDateFormat以“ YYYY-MM-DD LL：NN：SS A”的形式提供，因为我的日期是12小时格式，带有AM / PM。即使12PM早于2PM，也会在2PM值之后绘制12PM时的值。我该如何解决？

链接到codepen：https://codepen.io/shank9717/pen/xxxWMMN

数据示例：

  

“ 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","key": "2019-10-11 03:35:31 pm"
}]
     

"dataDateFormat": "YYYY-MM-DD LL:NN:SS A"

zpengibm 回答：AmCharts，日期时间轴在2PM之后显示12PM

将日期字符串更改为实际日期值。
将图表数据分配给变量。
将每个日期字符串更改为日期，
然后在图表选项中将变量分配给数据提供者。

将图表数据分配给变量。 

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",{
      "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","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","key": "2019-10-13 04:33:30 pm"
    },{
      "value1": "6004","key": "2019-10-13 04:57:14 pm"
    },{
      "value1": "14009","key": "2019-10-13 06:50:11 pm"
    },{
      "value1": "7006","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","key": "2019-10-14 12:00:19 pm"
    },{
      "value1": "16013","key": "2019-10-14 12:07:20 pm"
    },{
      "value1": "18009","key": "2019-10-14 12:31:28 pm"
    },{
      "value1": "9006","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","key": "2019-10-14 02:19:18 pm"
    },{
      "value1": "12004","key": "2019-10-14 03:59:39 pm"
    },{
      "value1": "13004","key": "2019-10-14 07:10:26 pm"
    },{
      "value1": "13005","key": "2019-10-14 07:24:20 pm"
    },{
      "value1": "14004","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","key": "2019-10-15 10:18:20 am"
    },{
      "value1": "15007","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","key": "2019-10-15 03:22:05 pm"
    },{
      "value1": "18004","key": "2019-10-15 08:06:00 pm"
    },{
      "value1": "18005","key": "2019-10-15 08:13:22 pm"
    },{
      "value1": "19004","key": "2019-10-15 08:31:22 pm"
    },{
      "value1": "20004","key": "2019-10-15 09:04:32 pm"
    },{
      "value1": "21004","key": "2019-10-15 09:25:24 pm"
    },{
      "value1": "21005","key": "2019-10-15 09:34:19 pm"
    },{
      "value1": "21006","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","key": "2019-10-16 06:31:26 pm"
    },{
      "value1": "23005","key": "2019-10-16 06:45:58 pm"
    },{
      "value1": "23006","key": "2019-10-16 06:50:01 pm"
    },{
      "value1": "24004","key": "2019-10-16 07:15:59 pm"
    },{
      "value1": "24005","key": "2019-10-16 07:19:01 pm"
    },{
      "value1": "48013","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","key": "2019-10-17 09:08:02 am"
    },{
      "value1": "26004","key": "2019-10-17 05:11:58 pm"
    },{
      "value1": "27004","key": "2019-10-17 07:39:58 pm"
    },{
      "value1": "28004","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","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执行not support AM/PM and 12 hour date formats in dataDateFormat。注意星号LL和A并注意以下几点：

  

* dataDateFormat设置不支持标有星号的格式代码。图表将无法解析数据中基于字符串的日期中的日期。

您需要预先将数据转换为使用24小时格式以供AmCharts使用dataDateFormat进行解析，或使用诸如moment.js之类的库将这些日期解析为Date对象以供AmCharts使用采用。我建议按照WhiteHat的答案中的建议，直接使用Date构造函数 ，因为该规范仅保证ISO8601 or RFC-2822 timestamps will work，这与您的格式不太匹配。

如果您要在数组上使用一下矩，那么以下代码将起作用：

[
  /* 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",//"dataDateFormat": "YYYY-MM-DD LL:NN:SS A","dataProvider": [
    {
      "value1": "1","key": "2019-10-17 08:55:58 pm"
    }
  ].map(function(item) {
    return {
      "value1": item.value1,"YYYY-MM-DD hh:mm a").toDate()
    }
  }),"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>

amchartschartsdatetimejavascript
本文链接：https://www.f2er.com/3095300.html

大家都在问