使用c3.js創建高值和低值的條形圖

Question

我一直在尋找c3.js幾天。它能夠爲我的大多數需求生成圖表。我不能解決這個問題的唯一方法是，如何在指定高值和低值時顯示條形圖。

例如：我的樣品陣列會是這樣的

Categories : ['cat1', 'cat2' ,'cat3' ,'cat4'] 
Low : [0,0,50,40] 
High : [90,80,40,60] 

基本上每個類別各條將基於這些高值和低值。

謝謝！

Answer 1

你可以試試這個例子：

var chart = c3.generate({ 
    data: { 
     columns: [ 
      ['Low', 0,0,50,40], 
      ['High', 90,80,40,60] 
     ] 
    }, 
    axis: { 
     x: { 
      type: 'category', 
      categories: ['cat1', 'cat2', 'cat3', 'cat4'] 
     } 
    } 
}); 

結果：

要知道如何安裝c3.js，請閱讀official documentation