Morris.js xKey 添加无意义的值

Question

这个问题我纠结了一个小时，想不通莫里斯图为什么把某种时间值放到X轴上。

首先，我的JSON如下：

{"data":[{"date":"2015-06-08","payed":"18.08","to_pay":"18.08"},
         {"date":"2015-06-11","payed":"70.24","to_pay":"108.24"}]}

我是这样创建图表的：

var json = JSON.parse(response);

Morris.Line({
    element: 'recebimentos-chart',
    data: json.data,
    xkey: 'date',
    ykeys: ['to_pay', 'payed'],
    labels: ['To pay', 'Payed'],
    gridTextColor: '#000',
    lineColors: ['#EA8A67', '#22aa22'],
});

现在的问题是：为什么在上帝的天堂里 X 斧头会写下图像显示的值？

正如您在我的 JSON 中看到的那样，有两个不同的日期。如果我只有一个日期（无论是哪个日期），图表效果很好（它在 X 轴中输出日期值），例如：

{"data":[{"date":"2015-06-11","payed":"18.08","to_pay":"18.08"},
         {"date":"2015-06-11","payed":"70.24","to_pay":"108.24"}]}

编辑 1：在 JSFiddle 中尝试时，我发现问题出在图表的宽度上。宽度较小的图表可以正确显示日期，宽度较大的图表可以显示小时数 (??)

问题是我需要展示一张大图表..

Answer 1

试试这个： http://jsfiddle.net/z97z2Lam/1/

他们的 doc 说 xLabels 属性:

Sets the x axis labelling interval. By default the interval will be automatically computed. The following are valid interval strings:
"decade"
"year"
"month"
"week"
"day"
"hour"
"30min"
"15min"
"10min"
"5min"
"minute"
"30sec"
"15sec"
"10sec"
"5sec"
"second"

Morris.js xKey 添加无意义的值

Morris.js xKey adding nonsense values

javascript

jquery

json

morris.js