使用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，请阅读官方文档