使用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