C3js堆叠的Area-Spline图表不会堆叠

Question

我正在尝试使用this example中的c3js来制作堆积区域图表，但是，我的线条不会堆叠 - 它们只是放在彼此之上，如下所示：

这是我的代码：

 
c3.generate({
  data: {
    json: [
        {
          "metricDate": "2016-02-08",
          "vlp": 9046,
          "other": 904,
          "vdp": 10000,
          "home": 3543
        }, {
          "metricDate": "2016-02-09",
          "vdp": 7000,
          "other": 1103,
          "home": 3667,
          "vlp": 9542
        }, {
          "metricDate": "2016-02-10",
          "other": 1043,
          "vlp": 9751,
          "home": 3681,
          "vdp": 5000
        }, {
          "metricDate": "2016-02-11",
          "other": 1433,
          "home": 4059,
          "vdp": 4000,
          "vlp": 9924
        }
    ],
    type: 'area-spline',
    keys: {
      x: 'metricDate',
      value: ["vlp", "home", "vdp", "other"]
    }
  },
  axis: {
    x: {
      type: 'timeseries',
    }
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.16/d3.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/c3/0.4.10/c3.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/c3/0.4.10/c3.css" rel="stylesheet" />

<div id="chart"></div>

Answer 1

您错过了groups说明，请在您的类型后面删除此行：area-spline line

groups:[['other','home','vdp','vlp']],

Answer 2

 
c3.generate({
  data: {
    json: [
        {
          "metricDate": "2016-02-08",
          "vlp": 9046,
          "other": 904,
          "vdp": 10000,
          "home": 3543
        }, {
          "metricDate": "2016-02-09",
          "vdp": 7000,
          "other": 1103,
          "home": 3667,
          "vlp": 9542
        }, {
          "metricDate": "2016-02-10",
          "other": 1043,
          "vlp": 9751,
          "home": 3681,
          "vdp": 5000
        }, {
          "metricDate": "2016-02-11",
          "other": 1433,
          "home": 4059,
          "vdp": 4000,
          "vlp": 9924
        }
    ],
    type: 'area-spline',
    groups:[['other','home','vdp','vlp']],
    keys: {
      x: 'metricDate',
      value: ["vlp", "home", "vdp", "other"]
    }
  },
  axis: {
    x: {
      type: 'timeseries',
    }
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.16/d3.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/c3/0.4.10/c3.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/c3/0.4.10/c3.css" rel="stylesheet" />

<div id="chart"></div>