javascript - C3 从带有动态类别的 CSV 加载的堆叠图表

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/