更改莫里斯线性图中 X 轴的值

Question

我写了一个简单的莫里斯线性图来捕捉在特定时间收集了多少。
JSFiddle：https://jsfiddle.net/Lvdn7xLa/2/
Morris js code:

Morris.Line({
  element: 'line-example',
  data: [{
    y: '6.30AM',
    a: 20
  }, {
    y: '7.30AM',
    a: 40
  }, {
    y: '8.30AM',
    a: 60
  }, {
    y: '9.30AM',
    a: 80
  }, {
    y: '10.30AM',
    a: 100
  }, {
    y: '11.30AM',
    a: 120
  }, {
    y: '12.30PM',
    a: 140
  }],
  xkey: 'y',
  ykeys: ['a'],
  labels: ['Amount collected']
});

但是 time 值没有出现在 X-axis 中。一些不相关的年份正在出现。如果我将 xkey: 'y', ykeys: ['a'] 更改为 xkey: ['a'], ykeys: 'y'，那么我会得到奇怪的结果，例如

Thu Jan 01 1970 05:30:00 GMT+0530 (India Standard Time)
Amount collected: 6.3

如何让时间值出现在 X-axis？

Answer 1

添加

parseTime: false

进入您的图表配置。

这将

skip time/date parsing for X values, instead treating them as an equally-spaced series.

否则，您需要将 "x" 值调整为毫秒或可以解析的有效 Date/Time 字符串

A string containing the name of the attribute that contains date (X) values. Timestamps are accepted in the form of millisecond timestamps (as returned by Date.getTime() or as strings in the following formats:

2012

2012 Q1

2012 W1

2012-02

2012-02-24

2012-02-24 15:00

2012-02-24 15:00:00

2012-02-24 15:00:00.000

http://jsbin.com/walekitori/edit?html,js,output

更改莫里斯线性图中 X 轴的值

Changing the values at X axis in morris linear graph

javascript

jquery

raphael

morris.js