c3.js 如何在水平条形图中将 y 标签放置在条形内部？

Question

我正在处理水平条形图，y 轴标签有点长（它们在移动视图中占据 space 的一半）。

我想知道是否可以在条形内移动标签。

这就是我的

var chart = c3.generate({
                bindto: '#IndivisualScore',
                bar: {
                    width: 15,
                    space: 2
                },
                padding: {
                    left: 100
                },
                color: {
                    pattern: ['#FABF62', '#ACB6DD','#FABF62', '#ACB6DD','#FABF62', '#ACB6DD','#FABF62', '#ACB6DD','#FABF62', '#ACB6DD','#FABF62', '#ACB6DD','#FABF62' ]
                },
                data: {
                    x: 'x',
                    columns:
                        [
                      ['x', "Initiative", "Sees and Acts on opportunities", "Persistence", "Information seeking", "Concern for high Quality of work","Commitment to Work Contract","Efficiency Orientation","Systematic Planning","Problem Solving","Self-confidence","Assertiveness","Persuasion","Use of influence Strategies"],
                      ['value', 300, 400,245,342,532,213,452,344,123,533,234,231,324]
                      ],

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

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

<script src="https://cdnjs.cloudflare.com/ajax/libs/c3/0.4.9/c3.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="IndivisualScore"></div>

Answer 1

基本解决方案是对所有标签应用转换：

.c3-text {
    transform: translateX(-25px);
    fill: #000 !important; /* to make them visible */
}

参见this fiddle。

更高级的解决方案可能是测量每个标签的宽度并单独设置 translateX 值。

c3.js 如何在水平条形图中将 y 标签放置在条形内部？

c3.js how to place the y label inside the bar in a horizontal bar graph?

javascript

svg

d3.js

c3.js