Morris.js，显示错误数据的折线图答案

【问题标题】：Morris.js, line graph showing wrong dataMorris.js，显示错误数据的折线图
【发布时间】：2015-06-03 09:15:43
【问题描述】：

我正在使用 morris.js 和 javascript 创建折线图。这是我的代码：

Morris.Area({
   element: 'hero-area',
   data: [
       { day: "Thu", Reward: 0, Redeem: 0 },
       { day: "Fri", Reward: 2, Redeem: 0 },
       { day: "Sat", Reward: 1, Redeem: 0 },
       { day: "Sun", Reward: 0, Redeem: 0 },
       { day: "Mon", Reward: 0, Redeem: 0 },
       { day: "Tue", Reward: 1, Redeem: 2 },
       { day: "Wed", Reward: 0, Redeem: 0 }
   ],
   xkey: 'day',
   ykeys: ['Reward', 'Redeem'],
   labels: ['Reward', 'Redeem'],
   // later on
   parseTime: false,
   hideHover: 'auto',
   lineWidth: 1,
   pointSize: 5,
   lineColors: ['#4a8bc2', '#ff6c60'],
   fillOpacity: 0.5,
   smooth: false
});

我将这个数组传递给 js，我得到了这个图表：

请查看周二图表。数组中的兑换值是 2，但在图中显示为 3，这是错误的。我有没有搞错？

【问题讨论】：

它很可能是堆积面积图，因此红色图表堆积在蓝色图表的顶部，而不是后面。所以它显示为 3，因为蓝色图是 1 个单位高，红色图是 2 个单位高，加起来是 3。

标签： javascript morris.js

【解决方案1】：

您的代码中没有错误，这是默认行为。这些区域相互叠加，因此值为 3，因为奖励 + 兑换 = 3。如果您希望它们叠加，可以使用behaviourLikeLine 选项。将其设置为 true，您将得到您想要的。

Morris.Area({
  element: 'hero-area',
  data: [{
    day: "Thu",
    Reward: 0,
    Redeem: 0
  }, {
    day: "Fri",
    Reward: 2,
    Redeem: 0
  }, {
    day: "Sat",
    Reward: 1,
    Redeem: 0
  }, {
    day: "Sun",
    Reward: 0,
    Redeem: 0
  }, {
    day: "Mon",
    Reward: 0,
    Redeem: 0
  }, {
    day: "Tue",
    Reward: 1,
    Redeem: 2
  }, {
    day: "Wed",
    Reward: 0,
    Redeem: 0
  }],
  xkey: 'day',
  ykeys: ['Reward', 'Redeem'],
  labels: ['Reward', 'Redeem'],
  // later on
  parseTime: false,
  hideHover: 'auto',
  lineWidth: 1,
  pointSize: 5,
  lineColors: ['#4a8bc2', '#ff6c60'],
  fillOpacity: 0.5,
  smooth: false,
  behaveLikeLine: true
});

【讨论】：

这对我来说是救命的答案。！非常感谢