我可以製作一個帶有C3.js的堆疊條形圖嗎？它具有獨立數據值的單獨列？

Question

我正在試圖製作一個有兩列的條形圖，其中每個都分成兩個不同的部分。第二列中的數據與第一列中的數據不同。這已被證明是C3.js中的一個問題。生成列的方法是將「列」數組傳遞給圖表的數據值。列陣列實際上是這樣一組陣列：

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列中不顯示。我嘗試在數組中爲列數值傳遞空值而不是整數，但我不想顯示數據，但是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/