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