代码之家 › 专栏 › 技术社区 › Nadeem Khan

如何在Morris地区图表中显示X轴上的月份名称

morris.js javascript

Nadeem Khan · 技术社区 · 6 年前

当X轴加上字符串值时,Morris区域图发生断裂,并显示这些误差:

错误:属性d:应为moveto path命令('M'或'M'), “Z”。

错误:属性d:应为数字“m,0,0”。

Morris.Area({
  element: 'area-example',
  data: [
    { y: 'Jan', a: 10},
    { y: 'Feb', a: 20},
    { y: 'Mar', a: 30},
    { y: 'Apr', a: 40},
    { y: 'May', a: 50},
    { y: 'Jun', a: 60}       
  ],
  xkey: 'y',
  ykeys: ['a'],
  labels: ['Series A']
});

莫里斯图书馆不提供现成的支持吗?

1 回复 | 直到 6 年前

Nadeem Khan 6 年前

我想出来了。默认情况下,Morris.js将X轴作为时间戳进行解析。禁用此用途 parseTime: false 是的。禁用PARSETIME后,X轴将开始在没有任何问题的情况下接受字符串输入。

然后可以选择使用 xLabels 和 xLabelFormat 定义X轴月名的自定义格式如下:

    const monthNames = ["", "Jan", "Feb", "Mar", "Apr", "May", "Jun",
        "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"
    ];
    Morris.Area({
        element: 'areaChart',
        data: [
            {y: 1, a: 10},
            {y: 2, a: 20},
            {y: 3, a: 30},
            {y: 4, a: 40},
            {y: 5, a: 50},
            {y: 6, a: 60}
        ],
        xkey: 'y',
        parseTime: false,
        ykeys: ['a'],
        xLabelFormat: function (x) {
            var index = parseInt(x.src.y);
            return monthNames[index];
        },
        xLabels: "month",
        labels: ['Series A'],
        lineColors: ['#a0d0e0', '#3dbeee'],
        hideHover: 'auto'

    });

输出