javascript - 更改莫里斯线性图中 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”值调整为毫秒或可解析的有效日期/时间字符串

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