Morrisjs 图表显示不正确

Question

我正在尝试使用 Marrisjs 生成图表，我之前已经做过几次，没有问题。然而，出于某种原因，这个被证明是非常烦人的！有什么地方出错了吗？

<h4 class="card-title">Pedigree Chart</h4>
<div id="morris-line-chart"></div>

$(function () {
    "use strict";
    // LINE CHART
    Morris.Line({
        element: 'morris-line-chart'
        , resize: true
        , data: [
            {y: 'April',pedigrees_added: 1},
            {y: 'March',pedigrees_added: 0},
            {y: 'February',pedigrees_added: 3},
            {y: 'January',pedigrees_added: 0},
            {y: 'December',pedigrees_added: 0},
            {y: 'November',pedigrees_added: 0},
            {y: 'October',pedigrees_added: 0},
            {y: 'September',pedigrees_added: 0},
            {y: 'August',pedigrees_added: 0},
            {y: 'July',pedigrees_added: 0},
            {y: 'June',pedigrees_added: 0},
            {y: 'May',pedigrees_added: 0},]
        , xkey: 'y'
        , ykeys: ['pedigrees_added']
        , labels: ['New added']
        , gridLineColor: '#eef0f2'
        , lineColors: ['#009efb']
        , lineWidth: 1
        , hideHover: 'auto'
        });
    });

问题是信息似乎没有正确显示。我猜某处存在语法错误。

Answer 1

此库仅适用于日期 x 轴。 (https://morrisjs.github.io/morris.js/lines.html) 像这样更改您的数据：

  data: [
        {y: '2019-04',pedigrees_added: 1},
        {y: '2019-03',pedigrees_added: 0},
        {y: '2019-02',pedigrees_added: 3},
        {y: '2019-01',pedigrees_added: 0},
        {y: '2018-12',pedigrees_added: 0},
        {y: '2018-11',pedigrees_added: 0},
        {y: '2018-10',pedigrees_added: 0},
        {y: '2018-09',pedigrees_added: 0},
        {y: '2018-08',pedigrees_added: 0},
        {y: '2018-07',pedigrees_added: 0},
        {y: '2018-06',pedigrees_added: 0},
        {y: '2018-05',pedigrees_added: 0}]

Morrisjs 图表显示不正确

Morrisjs chart not displaying properly

javascript

morris.js