Question

我正在尝试制作一个包含两列的条形图，每列都分为两个不同的部分。第二列中的数据与第一列中的数据不同。事实证明这对我来说是C3.js中的一个问题。生成列的方法是通过＆＃34;列＆＃34;数组到图表的数据值。 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中是否可以这样做？

Answer 1

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

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

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/

我可以制作带有C3.js的堆积条形图，其中单独的列具有单独的数据值吗？

1 个答案: