从具有动态类别的 CSV 加载的 C3 堆叠图表

Question

我正在尝试使用 C3 绘制堆叠（面积）折线图。

就目前而言，我的代码允许我创建一个不堆叠的折线图：

var chart = c3.generate({
data: {
    x: 'x',
    url: 'GeneratedData.csv',
    type: 'area',
    /* groups: [  ['data1', 'data2'] ] */
    },
    axis : {
        x : {
            type : 'timeseries',
            tick : {
              format : "%y-%m-%d" 
            }
        }
    }
});

我的问题是数据的生成方式是我事先不知道列的名称，所以我无法设置它们的类型或对它们进行分组（因此评论 groups: [ ['data1', 'data2'] ]）

我的 CSV 看起来像这样：

x,LT62Ag,5NwafDw,Pac0dA
2017-01-22,85797,145417,626803
2017-01-23,71837,105246,440776
2017-01-24,77650,108834,442359
...
2017-03-31,87359,102618,467113

我应该如何从动态数据创建组来堆叠图表？

Answer 1

您可以尝试将此添加到您的图表声明中，它会提取数据系列的名称（x 除外）并将它们变成一个大组：

onrendered: function () {
    var seriesNames = this.data.targets.map (function (d) {
      return d.id;
    }).filter (function (sname) {
        return sname !== "x";
    });
    this.api.groups ([seriesNames]);
  },

理想情况下，它应该通过 'oninit' 声明来完成，而不是在每次渲染时重置组，但似乎存在某种错误，当您这样做时，条形图会变成 1 像素宽。 .

我想可以使用一个标志来决定是否已经设置了组...

https://jsfiddle.net/1bb60dd9/

从具有动态类别的 CSV 加载的 C3 堆叠图表

C3 Stacked chart loaded from CSV with dynamic categories

javascript

csv

c3.js