如何在c3.js中在x轴上制作倒置条形图答案

【问题标题】：How to make inverted bar chart on the x-axis in c3.js如何在c3.js中在x轴上制作倒置条形图
【发布时间】：2017-02-25 17:36:56
【问题描述】：

我可以通过 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
            }
        });

我想实现这个，有什么想法吗？

【问题讨论】：

标签： javascript charts bar-chart c3.js

【解决方案1】：

您可以使用 css 转换来镜像包含条形的组并使用 transform-origin 将其保持在 svg 中：

      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
            }
        });

.c3-chart{
transform-origin: 120px 0px;
transform:scale(-1,1);
}

<script src="http://cdnjs.cloudflare.com/ajax/libs/c3/0.4.9/c3.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/d3/3.5.3/d3.min.js"></script>
<div id="topUses"></div>

另一种棘手的方法是将值反转 ['value', -160, -310, -232, -405, -200 ] ，然后你必须找到一些东西来删除图例中的“-”

【讨论】：