Morris.js 面积图 - Y 轴上的比例错误（可能是错误？）

Question

我正在查看此页面上 morris.js 面积图的示例：http://jqueryajaxphp.com/preview/charts/ 我注意到作者在那里使用了 json 数据馈送，这开头为：

"area" : {
    "area1" : {
         "y": "2006",
         "a": "31",
         "b": "84"
    },
    "area2" : {
         "y": "2007",
         "a": "12",
         "b": "25"
    },

但在图表上我们有：

如您所见，系列 B 的值为 84，但在图表上它远高于值 100。这是错误还是我误解了什么？

Answer 1

这是因为系列正在堆叠。这是默认行为。在 the documentation 中，您发现使用 behaveLikeLine 设置为 true 可以禁用此堆叠，以便覆盖区域。

例如 (JSFiddle example):

Morris.Area({
  element: 'area-example',
  behaveLikeLine: true,
  data: [
    { x: '2006', a: 100, b: 90 },
    { x: '2007', a: 75,  b: 65 },
    { x: '2008', a: 50,  b: 40 },
    { x: '2009', a: 75,  b: 65 },
    { x: '2010', a: 50,  b: 40 },
    { x: '2011', a: 75,  b: 65 },
    { x: '2012', a: 100, b: 90 }
  ],
  xkey: 'x',
  ykeys: ['a', 'b'],
  labels: ['Series A', 'Series B']
});

请注意，此功能似乎不适用于 Morris 0.4.1，但适用于 0.5.1。

Morris.js 面积图 - Y 轴上的比例错误（可能是错误？）

Morris.js area chart - wrong scale on the Y-axis (possible bug?)

javascript

morris.js