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

Question

我正在使用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，这是错误的。 我有没有犯错？

Answer 1

您的代码中没有错误，这是默认行为。 这些区域彼此堆叠，因此值是3，因为Reward + Redeem =3。如果要覆盖它们，则可以使用behaviorLikeLine选项。 将其设置为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
});