我正在尝试制作一个包含两列的条形图,每列都分为两个不同的部分。第二列中的数据与第一列中的数据不同。事实证明这对我来说是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中是否可以这样做?
答案 0 :(得分: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']
]
},
});