莫里斯折线图无法正常工作答案

【问题标题】：Morris line chart is not working properly莫里斯折线图无法正常工作
【发布时间】：2021-01-22 15:18:41
【问题描述】：

我使用 morris.js 创建了这个简单的折线图。但它没有正确显示数据。我不知道为什么？请在 js fiddle 中查看。

Js 小提琴：link

new Morris.Line({
    element: 'multi-line-mp',

    data: [
        {
            day: 'Jan 1',
            sales: '0',
            purchases: '1'
        },
        {
            day: 'Jan 2',
            sales: '14',
            purchases: '3'
        },
        {
            day: 'Jan 3',
            sales: '45',
            purchases: '0'
        },
        {
            day: 'Jan 4',
            sales: '47',
            purchases: '32'
        },
        {
            day: 'Jan 5',
            sales: '90',
            purchases: '10'
        }        
    ],

    xkey: 'day',
    ykeys: ['Sales', 'Purchases'],
    labels: ['Sales', 'Purchases'],
    resize: true
});

【问题讨论】：

标签： javascript morris.js

【解决方案1】：

你的xkey（天）的日期格式不好，这是一个字符串而不是真正的日期。

你有两个选择：

将 xkey 的格式更改为真实日期（如 2021 年 1 月 1 日而不是 1 月 1 日）
将选项 parseTime 设置为 false，这样它就不会尝试将字符串格式化为日期

如果您更改 xkey 的格式，您仍然可以通过 dateFormat 函数更改日期的显示方式（请参阅此处的文档：http://morrisjs.github.io/morris.js/lines.html）

【讨论】：