javascript - 如何在c3.js中调整条形图的大小

Question

我想让 c3.js 图表比现在的实际尺寸小。我调整了宽度，但如果不是 620，它会 chop 较大的值。

红色图表为 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,
         },
      }
},