如何在c3.js中調整條形圖的大小

Question

我想使c3.js圖小於現在的實際值。 我玩的是寬度，但如果不是620，它將截去較大的值。

紅色圖形為620像素。 我希望它是第一個圖形的大小，所有值都顯示而沒有任何淡入/截止。

var chart = c3
            .generate({
                bindto : "#topSources",
                size : {
                    height : 180,
                    width : 620
                },
                bar : {
                    width : 16
                },
                padding : {
                    right : 230,
                    top : 50
                },
                color : {
                    pattern : [ '#008000', '#008000', '#008000', '#008000',
                            '#008000' ]
                },
                data : {
                    columns : [ [ 'Throughput', data.columns[0][1],
                            data.columns[0][2], data.columns[0][3],
                            data.columns[0][4], data.columns[0][5] ] ],
                    type : 'bar',
                    labels : {
                        format : {
                            Throughput : d3.format('$'),

                        }
                    },

                    color : function(inColor, data) {
                        var colors = [ '#008000', '#008000', '#008000',
                                '#008000', '#008000' ];
                        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
                }
            });

Answer 1

設置軸填充的值（本例中y軸的底部，因為它是旋轉的條形圖）。 80px將覆蓋您標簽的大部分長度-如果您更改字體大小等，則需要不同

axis : {
      ...
      y : {
         show : false,
         padding: {  // use these 3 lines
            bottom: 80,
         },
      }
},