Как сохранить одинаковую ширину во всех барах в библиотеке C3 Javascript?

Question

Я не хочу устанавливать все бары одинаковой ширины, потому что если у меня мало баров, они становятся очень большими, а если у меня много баров, они становятся очень тонкими. Вот что я имею в виду:

У меня ширина бара 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
    // }
});
});

Спасибо и привет!

Answer 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 для учета оси / меток и т. Д. c. Если у каждого из вас было 50 данных, то это должна быть ширина: 6 * 20 + 15 ..... конечно, теперь у вас есть другая диаграмма ширины, но ширина стержней и расстояние между столбцами должны быть довольно равномерными. Чем больше данных, тем длиннее график. Вам может понадобиться «20» и «15», чтобы получить желаемый вид.