我可以用 C3.js 制作一个堆积条形图，它有不同列的不同数据值吗？答案

【问题标题】：Can I make a stacked bar chart with C3.js which has separate data values for separate columns?我可以用 C3.js 制作一个堆积条形图，它有不同列的不同数据值吗？
【发布时间】：2016-09-30 02:05:15
【问题描述】：

我正在尝试制作一个包含两列的条形图，每列分为两个不同的部分。第二列中的数据与第一列中的数据不同。对我来说，这已被证明是 C3.js 中的一个问题。生成列的方法是将“列”数组传递给图表的数据值。 columns 数组实际上是一个数组数组，如下所示：

columns: [
    ['data1', 50, 100],
    ['data2', 20, 30],
    ['data3', 30, 60],
    ['data4', 20, 20]
]

其中每个数组代表一个数据值。数组中的第一个值是数据值的名称，后面的值是数据值将在条形图的相应列中占用的空间量。因此，例如，data1 值将在第 1 列中高 50 个单位，在第 2 列中高 100 个单位。

问题是我想在第 1 列中显示 data1 和 data2，但在第 2 列中根本不显示。我想在第 2 列中显示 data3 和 data4，但在第 1 列中根本不显示。我尝试传递 null我不想显示的数据的数组中的列值的值而不是整数，但是 C3.js 仍然在图表中留下空间，就好像值在那里并且等于零一样。

有谁知道在 C3.js 中是否可以做到这一点？

【问题讨论】：

标签： javascript charts bar-chart c3.js stacked-chart

【解决方案1】：

根据我对阅读您的问题的理解，如果我误解了，请告诉我：

如果您使用组配置 - http://c3js.org/reference.html#data-groups -，则 x 轴空间仅保留每个组而不是每个数据系列。因此，如果您随后将数据系列 1 和 3 以及数据系列 2 和 4 放在同一组中，并将您不想看到的值设为 null，您将不会遇到“空”空间问题

var chart = c3.generate({
    data: {
        columns: [
            ['data1', 50, null],
            ['data2', 20, null],
            ['data3', null, 60],
            ['data4', null, 20]
        ],
        type: 'bar',
        groups: [
            ['data1', 'data3'],
            ['data2', 'data4']
        ]
    },
});

http://jsfiddle.net/j7jw4suo/1/

【讨论】：