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 来显示它。基本上，如果标签格式的中心位于图中最早的数据点，不画。

我还注意到，在您的 fiddle 中，您没有用方括号括起 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.

morrisjs 折线图未显示第一个 xLabel

morrisjs line graph not showing the first xLabel

javascript

morris.js