求助：Morris.js折线图无法正常渲染问题排查

问题描述 #

尝试用Morris.js库渲染折线图，但图表无法正常显示。已确认HTML目标元素ID正确、数据值均为数字、ykeys与labels数组长度匹配，仍无法渲染。

实现代码 #

var transformedData = [
  {
    y: "Gennaio",
    a: 0,
    b: 0,
    c: 0,
    d: 0,
    e: 0,
    f: 7044,
    g: 0,
    h: 0,
    i: 10338,
    j: 0,
    k: 3428
  },
  {
    y: "Febbraio",
    a: 0,
    b: 0,
    c: 0,
    d: 0,
    e: 0,
    f: 8189,
    g: 103,
    h: 0,
    i: 4779,
    j: 2006,
    k: 16654
  },
  {
    y: "Marzo",
    a: 0,
    b: 0,
    c: 0,
    d: 5377,
    e: 0,
    f: 7583,
    g: 3301,
    h: 0,
    i: 0,
    j: 337,
    k: 3736
  },
  {
    y: "Aprile",
    a: 0,
    b: 0,
    c: 0,
    d: 0,
    e: 0,
    f: 20202,
    g: 0,
    h: 0,
    i: 4868,
    j: 0,
    k: 6292
  },
  {
    y: "Maggio",
    a: 0,
    b: 1793,
    c: 0,
    d: 6106,
    e: 0,
    f: 20030,
    g: 20967,
    h: 0,
    i: 1499,
    j: 1402,
    k: 11716
  },
  {
    y: "Giugno",
    a: 0,
    b: 0,
    c: 0,
    d: 0,
    e: 0,
    f: 11274,
    g: 9798,
    h: 34021,
    i: 5998,
    j: 1032,
    k: 42561
  },
  {
    y: "Luglio",
    a: 0,
    b: 0,
    c: 0,
    d: 0,
    e: 0,
    f: 15338,
    g: 0,
    h: 42292,
    i: 4420,
    j: 0,
    k: 1452
  },
  {
    y: "Agosto",
    a: 0,
    b: 0,
    c: 0,
    d: 0,
    e: 1990,
    f: 3240,
    g: 0,
    h: 0,
    i: 7158,
    j: 517,
    k: 0
  },
  {
    y: "Settembre",
    a: 0,
    b: 0,
    c: 0,
    d: 22193,
    e: 1171,
    f: 0,
    g: 1125,
    h: 4763,
    i: 0,
    j: 0,
    k: 0
  },
  {
    y: "Ottobre",
    a: 0,
    b: 0,
    c: 0,
    d: 0,
    e: 0,
    f: 0,
    g: 0,
    h: 0,
    i: 0,
    j: 0,
    k: 9317
  },
  {
    y: "Novembre",
    a: 0,
    b: 0,
    c: 0,
    d: 0,
    e: 0,
    f: 0,
    g: 0,
    h: 0,
    i: 0,
    j: 0,
    k: 0
  },
  {
    y: "Dicembre",
    a: 0,
    b: 0,
    c: 0,
    d: 0,
    e: 0,
    f: 0,
    g: 0,
    h: 0,
    i: 0,
    j: 0,
    k: 0
  }
];

// Build the graph
Morris.Line({
  resize: true,
  element: "morrisLine",
  data: transformedData,
  xkey: "y",
  ykeys: ["a", "b", "c", "d", "e", "f", "g", "h", "i", "j", "k"],
  labels: [
    "ATHENA COLLEZIONI",
    "CAMPEGGI DESIGN",
    "CESAR",
    "FLEXTEAM",
    "GLAMORA",
    "INTEC",
    "MODULA",
    "MODULA - GAGGENAU",
    "MODULA - NEFF",
    "OPINIONCIATTI",
    "RIMADESIO"
  ]
});

已确认项 #

• HTML中目标元素id="morrisLine"存在
• 数据中所有y轴对应值均为数字类型
• ykeys数组与labels数组长度一致，一一对应

可能原因及解决方法 #

• 依赖库加载问题：Morris.js依赖jQuery和Raphael.js，必须确保这两个库在Morris.js之前加载。检查脚本引入顺序，先加载jQuery，再加载Raphael.js，最后加载Morris.js及其样式文件。
• 全零系列干扰：数据中多个系列（如a、b、c）全年数值均为0，Morris.js可能因无有效数据点渲染异常。可暂时移除全零的ykeys项测试，之后再通过配置调整系列显示逻辑。
• 容器尺寸缺失：确保#morrisLine元素有明确宽高样式（如width: 100%; height: 400px;），无尺寸容器会导致Morris.js无法计算布局。
• 版本兼容性问题：不同版本的Morris.js对依赖库版本有要求，确认使用的Morris.js版本与jQuery、Raphael.js版本兼容，建议使用稳定版本组合。

内容的提问来源于Stack Exchange，提问作者Ziubell