如何在 C3 Javascript 库中的所有条形中保持相同的宽度？答案

【问题标题】：how to keep the same width in all bars in C3 Javascript library?如何在 C3 Javascript 库中的所有条形中保持相同的宽度？
【发布时间】：2020-03-06 07:58:02
【问题描述】：

我不想将所有条设置为相同的宽度，因为如果我有很少的条，它们会变得非常大，如果我有很多条，它们会变得很细。这就是我的意思：

我的条宽为 50，因为我认为这是条的大小，但如果数量增加，它会使条变小。这是我的代码：

$(document).ready(function () {

var chart = c3.generate({
bindto: '#stocked',
size: {
    height: 320,
    width: 1500
},
data: {
    labels: ['y',1,2,3,4,5,6],
    columns: [
        ['MUSCLE', <?php echo substr($muscle,1,strlen($muscle)); ?>],
        ['FAT', <?php echo substr($fat,1,strlen($fat)); ?>]
    ],
    groups: [
        ['MUSCLE', 'FAT']
    ],
    type: 'bar',
    colors: {
        MUSCLE: '#75e3ff',
        FAT: '#23bbe8'
    }
},
bar: {
    // width: { ratio: 0.8 }
    width: 50,

},
axis: {
    x: {
        type: 'categories',
        show: true,
        label: {
            text: 'Measurements',
            position: 'outer-middle'
        },
        tick: {
            format: "%b",
            fit: true,

        },


    },
    y: {
        label: {
            text: '<?php echo $_SESSION["unit"]; ?>',
            position: 'outer-middle'
        }
    },  

},
    // subchart: {
    // show: true
    // }, 
    // zoom: {
    // enabled: true
    // }
});
});

感谢和问候！

【问题讨论】：

标签： width bar-chart c3.js

【解决方案1】：

条形的宽度是图表宽度和填充数据量的结果。我的建议是相应地调整图表或容纳图表的容器的大小。这将防止每个条形之间出现大的空白，并使图表之间的外观更加统一。

ex：如何确定图表宽度的伪代码。

    var chart = c3.generate({
size: {
    height: 240,
    width: function () {
   return 6 * 20 + 15         
},
data: {
    columns: [
        ['sample', 30, 200, 100, 400, 150, 250]
    ]
}

});

在这里你可以看到有 6 条数据，每个数据有 20 个空间，然后是额外的 15 个空间来说明轴/标签等。如果每个你有 50 个数据，那么它应该是宽度：6 * 20 + 15 .....当然，现在您有不同的宽度图表，但条形宽度和条形之间的空间应该非常均匀。数据越多，图表越长。您可能需要“20”和“15”才能获得所需的外观。

【讨论】：