morrisjs线图没有显示第一个xLabel

Question

我不知道我在这里缺少什么。 折线图未显示第一个x标签：

这是我的代码：

new Morris.Line({
element: 'chart_170',
data: [
    { y: '2015-04-10 04:01', a: -10},
    { y: '2015-04-10 10:45', a: -10},
    { y: '2015-04-11 05:45', a: -10},
    { y: '2015-04-12 05:45', a: -8},
    { y: '2015-04-12 03:45', a: -8}],
resize: true,
xkey: ['y'],
ykeys: 'a',
labels: 'a',
xLabels: ['day'],
ymax: 'auto',
resize: 'true',
hideHover: true,
yLabelFormat: function(y) {
    if (y % 1 === 0) 
        return -y;
    else return '';
}});

任何帮助将不胜感激。 谢谢！

Answer 1

我可以通过在4月9日23:39（晚上11点）添加一个事件并将事件描边设置为0来显示它。基本上，如果标签格式的中心位于最早的数据点之前图表，它不会被绘制。

我也注意到，在你的小提琴中，你并没有用括号括起你的labels选项，如果你的字符串长于一个字符，这会导致奇怪的行为。

new Morris.Line({
    element: 'chart_170',
    data: [
        { y: '2015-04-10 04:01', a: -10},
        { y: '2015-04-10 10:45', a: -10},
        { y: '2015-04-11 05:45', a: -10},
        { y: '2015-04-12 05:45', a: -8},
        { y: '2015-04-12 03:45', a: -8}],
    events: ['2015-04-09 23:39'],
    eventStrokeWidth: 0,
    resize: true,
    xkey: ['y'],
    ykeys: ['a'],
    labels: ['a'],
    xLabels: ['day'],
    xLabelFormat: function(x) { 
        return x.toDateString();
    },
    ymax: 'auto',
    resize: 'true',
    hideHover: true,
    yLabelFormat: function(y) {
        if (y % 1 === 0) 
            return -y;
        else return '';
    }
});

Try it in a fork of your fiddle