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

Changing the values at X axis in morris linear graph

本文关键字：莫里斯 线性 改变      更新时间：2023-09-26

我写了一个简单的morris线性图来捕捉在特定时间收集了多少。
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

添加

parseTime: false

到你的图表配置。

这将

跳过对X值的时间/日期解析，而是将它们作为一个条平行系列。

否则你需要调整你的"x"值为毫秒或一个有效的日期/时间字符串，可以被解析

包含包含date (X)的属性名称的字符串值。时间戳以毫秒时间戳的形式被接受(由Date.getTime()返回，或以以下格式的字符串形式返回:

  • 2012
    • 2012 Q1
  • 2012 W1
  • 2012 - 02年
  • 2012-02-24
    • <
  • 2012-02-24 15:00/gh>
  • 2012-02-24 15:00:00
  • 2012-02-24 15:00:00.000

http://jsbin.com/walekitori/edit?html、js、输出

相关文章：