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

Question

在x轴上添加字符串值并显示以下错误时，Morris区域图会中断：

  

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

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'

    });

输出