Morris.js Line-Chart 第一个值在右侧

Question

我用 morris.js

创建了折线图

这是我的 js 代码：

var m1 = new Morris.Line({
    element: 'line-chart1',
    data: [
        { month: '2016-09', a: 20, b: 0 }, 
        { month: '2016-08', a: 0, b: 0 },
        { month: '2016-07', a: 0, b: 0 },
        { month: '2016-06', a: 0, b: 0 },
        { month: '2016-05', a: 0, b: 0 },
        { month: '2016-04', a: 0, b: 0 },
        { month: '2016-03', a: 0, b: 0 },
        { month: '2016-02', a: 0, b: 0 },
        { month: '2016-01', a: 0, b: 0 },
        { month: '2015-12', a: 0, b: 0 },
        { month: '2015-11', a: 0, b: 0 },
        { month: '2015-10', a: 0, b: 0 },
        { month: '2015-09', a: 0, b: 0 }],
    xkey: 'month',
    ykeys: ['a', 'b'],
    labels: ['Deutsche Gäste', 'Internationale Gäste'],
    lineColors: ['#D9534F', '#428BCA'],
    lineWidth: '2px',
    hideHover: true,
    ymax: 100,
    xLabelAngle: 40,
    setAxisAlignFirstX: true
});

此代码有效并绘制了图表，但问题是第一个值 (2016-09) 绘制在右侧。但我希望它从左边开始。

这是它的样子：

如何才能让第一个值画在左边，然后从左到右继续画下去？

感谢您的帮助 ;-)

Answer 1

只需将parseTime设置为false:

parseTime: false

试试下面的代码片段：

var m1 = new Morris.Line({
  element: 'line-chart1',
  data: [
    { month: '2016-09', a: 20, b: 0 }, 
    { month: '2016-08', a: 0, b: 0 },
    { month: '2016-07', a: 0, b: 0 },
    { month: '2016-06', a: 0, b: 0 },
    { month: '2016-05', a: 0, b: 0 },
    { month: '2016-04', a: 0, b: 0 },
    { month: '2016-03', a: 0, b: 0 },
    { month: '2016-02', a: 0, b: 0 },
    { month: '2016-01', a: 0, b: 0 },
    { month: '2015-12', a: 0, b: 0 },
    { month: '2015-11', a: 0, b: 0 },
    { month: '2015-10', a: 0, b: 0 },
    { month: '2015-09', a: 0, b: 0 }],
  xkey: 'month',
  ykeys: ['a', 'b'],
  labels: ['Deutsche Gäste', 'Internationale Gäste'],
  lineColors: ['#D9534F', '#428BCA'],
  lineWidth: '2px',
  hideHover: true,
  ymax: 100,
  xLabelAngle: 40,
  setAxisAlignFirstX: true,
  parseTime: false
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/raphael/2.1.0/raphael-min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/morris.js/0.5.1/morris.min.js"></script>
<link href="//cdnjs.cloudflare.com/ajax/libs/morris.js/0.5.1/morris.css" rel="stylesheet"/>

<div id="line-chart1"></div>

Morris.js Line-Chart 第一个值在右侧

Morris.js Line-Chart first value on the right side

javascript

charts

direction

morris.js