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/

C3使用动态类别从CSV加载的堆积图表

1 个答案: