Как отобразить две диаграммы C3 в одной строке в двух разных div

Question

У меня проблемы с плагинами c3. Я пытаюсь поместить 2 диаграммы в структуру, подобную этой:

<div class="row">
    <div class="col-6">
        <div id="chart1"></div>
    </div>
    <div class="col-6">
        <div id="chart2"></div> 
    </div>
</div>

Мой вывод - прикрепленный, и я не смог найти причину, по которой графики go вышли из div.

Я уже пытался использовать chart.resize(), но это не работает (возможно, я поставил его не в том месте). Вы можете помочь мне ?

Вы можете найти мой код здесь: js1 , js2 , html

Спасибо!

Answer 1

Проблема в том, что вы загружаете диаграммы (я думаю!) В div, который не отображается при загрузке страницы, C3 не знает, как правильно масштабировать диаграммы.
Вместо загрузки каждого графика в Document Ready оберните ваши сообщения в функцию, подобную этой:

function loadStatArticoliCharts() {
    $.post(
        '{{ url('myGetter') }}/{{ data.listId }}',
        {},
        function(data) {
            grafico_fatturato = c3.generate({
                bindto: "#fatturato-mensile-barre",
                data: {
                    columns: [
                        [new Date().getFullYear() - 1, 0,0,0,0,0,0,0,0,0,0,0,0],
                        [new Date().getFullYear(), 0,0,0,0,0,0,0,0,0,0,0,0],
                    ],
                    type : 'bar',
                    colors: data.colors
                },
                bar: {
                    width: 30
                },
                axis: {
                    x: {
                        type: 'category',
                        categories: months
                    },
                    y: {
                        tick: {
                            format: function(value) { return value.formatMoney(2, ',', '.') }
                        }
                    }
                },
                tooltip: {
                    format: {
                        value: function(value) { return "€ " + value.formatMoney(2, ",", "."); }
                    }
                },
                transition: {
                    duration: 1000
                }
            });
            setTimeout(function() {
                grafico_fatturato.load({
                    columns: [
                        data.columns.current,
                        data.columns.past
                    ],
                });
                grafico_fatturato.resize();
            }, 500);
        }
    );
}

Создайте глобальную логическую переменную для хранения, если вы уже загрузили диаграммы (чтобы вы не запускали загрузку несколько раз) с помощью

let loadedChart1 = false;
let loadedChart2 = false;

Наконец, создайте контроллер, который будет запускать функцию загрузки при нажатии на вкладку:

$('a[data-toggle="tab"]').on('shown.bs.tab', function (ev) {
    let tabId = $(ev.target).attr("aria-controls");
    switch (tabId) {
        case "chart1":
            if (!loadedChart1) {
                loadChart1();
                loadedChart1 = true;
            }
            break;
        case "chart2":
            if (!loadedChart2) {
                loadChart2();
                loadedChart2 = true;
            }
            break;
    }
    let oldTabId = $(ev.relatedTarget).attr("aria-controls");
    $('#' + oldTabId).removeClass("active");
}