javascript - 如何在莫里斯面积图中的 x 轴上以字符串形式显示月份名称

Question

当在 x 轴中添加字符串值时，Morris 面积图会中断并显示以下错误:

Error: attribute d: Expected moveto path command ('M' or 'm'), "Z".

Error: attribute d: Expected number, "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']
});

开箱即用的 Morris 库不支持它吗？

Answer 1

我想通了。 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'

    });

输出