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

Question

在 x 轴中添加字符串值时，莫里斯面积图会中断，并显示以下错误：

错误：属性 d：预期的移动路径命令（'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']
});

开箱即用的莫里斯库不支持吗？

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'

    });

输出