javascript - 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，我得到了这个图表:

请查看星期二图表。 redeem 的值在数组中为 2，但在图表中显示为 3，这是错误的。我做错了吗？

Answer 1

您的代码没有错误，这是默认行为。这些区域堆叠在一起，因此值为 3，因为奖励 + 兑换 = 3。如果你想让它们叠加，你可以使用 behaveLikeLine 选项。将其设置为 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
});