Morris.js右侧的线图第一个值

Question

我用morris.js

创建了折线图

这是我的js-Code：

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>