如何在莫里斯折线图中将数字添加到 x 轴而不是年份？

Question

我在我的 python 项目中添加了莫里斯折线图。我想要 x 轴在 5-10-15-20-15-30 的区间内。而不是年份格式。怎么做？

$(document).ready(function(){           
    Morris.Line({
        element: 'line-example',
        data: [
            { y: '5', a: {{count5}}, b: {{count11}} },
            { y: '10', a: {{count6}} ,  b: {{count12}} },
            { y: '15', a: {{count7}},  b: {{count13}} },
            { y: '20', a: {{count8}},  b: {{count14}} },
            { y: '25', a: {{count9}},  b: {{count15}} },
            { y: '30', a: {{count10}} ,  b: {{count16}} }
        ],
        xkey: 'y',
        ykeys: ['a','b'],
        labels: ['Customer Added','Reqest Received']
    });
});

Answer 1

只需将parseTime参数设置为false:

parseTime: false

Morris.Line({
  element: 'line-example',
  data: [
    { y: '5', a: 2, b: 3 },
    { y: '10', a: 5, b: 15 },
    { y: '15', a: 30, b: 8 },
    { y: '20', a: 100, b: 35 },
    { y: '25', a: 50, b: 10 },
    { y: '30', a: 20, b: 30 }
  ],
  xkey: 'y',
  ykeys: ['a', 'b'],
  labels: ['Customer Added', 'Reqest Received'],
  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-example"></div>

如何在莫里斯折线图中将数字添加到 x 轴而不是年份？

How to add numbers to x axis instead of year in morris line chart?

html

python

jquery-ui

morris.js