Javascript Morris.js，显示错误数据的线形图

我正在使用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，得到以下图形：

---

请查查星期二的图表。在数组中，receive的值为2，但在图形中显示为3，这是错误的。我犯了什么错误吗？

您的代码中没有错误，这是默认行为。这些区域相互叠加，因此值为3，因为奖励+赎回=3。 如果希望它们重叠，可以使用behaveLikeLine选项。把它设为真，你就会得到你想要的

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
});

---

代码中没有错误，这是默认行为。这些区域相互叠加，因此值为3，因为奖励+赎回=3。 如果希望它们重叠，可以使用behaveLikeLine选项。把它设为真，你就会得到你想要的

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
});

---

它很可能是一个堆叠的面积图，所以红色图形堆叠在蓝色图形的顶部，而不是后面。所以它显示为3，因为蓝色的图是1个单位高，红色的图是2个单位高，加起来就是3。这很可能是一个叠加面积图，所以红色的图叠加在蓝色图的上面，而不是后面。所以它显示为3，因为蓝色的图是1个单位高，红色的图是2个单位高，加起来就是3。这对我来说是拯救生命的答案。！非常感谢你，这对我来说是救命的答案。！多谢各位