Javascript 如何在c3.js中制作x轴上的倒条形图

我能够通过c3.js实现这一点

这是我的c3.js代码

            var chart = c3
        .generate({
            bindto : "#topUses",
            size : {
                height : 180,
                width : 400
            },
            bar : {
                width : 14
            },
            padding : {
                left : 100,
                top : 50
            },
            color : {
                pattern : [ '#ff1919', '#ff1919', '#ff1919', '#ff1919',
                        '#ff1919' ]
            },
            data : {
                x : 'x',
                columns : [
                        [ 'x', 'Google', 'Yahoo', 'Facebook',
                                'Capital One', 'Express' ],
                        [ 'value', 160, 310, 232, 405, 200 ] ],

                type : 'bar',

                color : function(inColor, data) {
                    var colors = [ '#ff1919', '#ff1919', '#ff1919',
                            '#ff1919', '#ff1919' ];
                    if (data.index !== undefined) {
                        return colors[data.index];
                    }

                    return inColor;
                }
            },
            axis : {
                rotated : true,
                x : {
                    type : 'category',
                    show : false,
                },
                y : {
                    show : false
                }
            },
            tooltip : {
                grouped : false
            },
            legend : {
                show : false
            }
        });

我想做到这一点，有什么想法吗

---

您可以使用css transform来隐藏包含条的组，并使用transform origin将其保留在svg中：

var图表=c3
.产生({
bindto:“#topUses”，
尺寸：{
身高：180，
宽度：400
},
酒吧：{
宽度：14
},
填充：{
左:100,，
前50名
},
颜色：{
模式：['#ff1919'，'#ff1919'，'#ff1919'，'#ff1919'，'#ff1919'，
“#ff1919”]
},
数据：{
x：‘x’，
栏目：[
['x'、'Google'、'Yahoo'、'Facebook'，
'大写字母一'，'快速']，
[‘值’、160、310、232、405、200]，
类型：'bar'，
颜色：功能（颜色、数据）{
变量颜色=['#ff1919'、'#ff1919'、'#ff1919'，
"ff1919","ff1919",；
if（data.index！==未定义）{
返回颜色[数据索引]；
}
返回原色；
}
},
轴线：{
对,，
x:{
类型：'类别'，
秀:假,，
},
y:{
节目：假
}
},
工具提示：{
分组：false
},
图例：{
节目：假
}
});
.c3图表{
变换原点：120px 0px；
变换：比例（-1,1）；
}