首页
学习
活动
专区
圈层
工具
发布
社区首页 >问答首页 >显示时间轴在下午2点后12点的AmCharts

显示时间轴在下午2点后12点的AmCharts
EN

Stack Overflow用户
提问于 2019-11-15 12:53:54
回答 2查看 492关注 0票数 1

我有一个带有日期时间类别轴的chartJson,类别值作为字符串解析成日期时间值。dataDateFormat以“YYYY DD LL:NN:SS”的形式提供,因为我的日期是AM/PM的12小时格式。12 2PM的值是在2 2PM之后绘制的,尽管12 2PM在2 2PM之前。我怎么才能解决这个问题?

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

数据示例:

"dataProvider": { "value1":"1","alteredText":“2019-09-20.1.”,“键”:"2019-09-20 12:22 pm“} { "value1":"2","alteredText":"2019-09-20 0.”,“键”:“2019-09-2001:24:03 pm”} { "value1":"3","alteredText":"2019-09-26 1.“,”键“:"2019-09-26 12:40 am”},{ "value1":"4","alteredText":"2019-10-11 1.“,"key":"2019-10-11 12:09:09 pm”}{ "value1":"1004","alteredText":"2019-10-11 .“,“键”:"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"

EN

回答 2

Stack Overflow用户

发布于 2019-11-15 13:31:52

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

将图表数据分配给变量。

将每个日期字符串更改为日期,

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

将图表数据分配给变量。

代码语言:javascript
复制
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"
    },
    ...

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

代码语言:javascript
复制
chartData.forEach(function (row, index) {
  row.key = new Date(row.key);
  chartData[index] = row;
});

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

代码语言:javascript
复制
"dataProvider": chartData,

看下面的工作片段..。

代码语言:javascript
复制
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
}
);
代码语言:javascript
复制
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;
}
代码语言:javascript
复制
<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>

票数 1
EN

Stack Overflow用户

发布于 2019-11-18 01:40:22

AmCharts v3做dataDateFormat。请注意LLA的星号,并注意以下注意事项:

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

您需要将数据转换为使用24小时格式的AmCharts来使用dataDateFormat进行解析,或者使用像moment.js这样的库将这些日期解析为Date对象以供AmCharts使用。我建议不要像WhiteHat的答案中所建议的那样直接使用Date构造函数,因为规范只保证您的格式不太适合的任何一个ISO8601或RFC-2822时间戳将有效。

如果要在数组上使用矩,那么下面的代码就可以工作了:

代码语言:javascript
复制
[
  /* your data array */
].map(function(item) {
    return {
      "value1": item.value1,
      "alteredText": item.alteredText,
      "key": moment(item.key, "YYYY-MM-DD hh:mm a").toDate()
    }
  })

演示如下:

代码语言:javascript
复制
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
}
);
代码语言:javascript
复制
#chartdiv {
  width: 100%;
  height: 500px;
}
代码语言:javascript
复制
<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>												

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/58877492

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档