如何在两个不同的div中在同一行显示两个C3图表

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>

我的输出是附件，我找不到图表超出 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");
}

如何在两个不同的div中在同一行显示两个C3图表

How to display two C3 charts in the same row in two different divs

javascript

jquery

bootstrap-4

c3.js