Я пытаюсь использовать ChartsJS в системе вкладок. Первый график на первой вкладке отображается, а последующие - нет.

Я считаю, что это потому, что вкладкиdisplay:none, поэтому, когда диаграммы сначала генерируются, они создаются в div с нулевыми измерениями.

Это решает проблему, но ломает вкладки:

.vertical-nav>div.tab-content {
    display: block !important;
}

Имея это в виду, я перепробовал все способы регенерировать графики после открытия вкладки или принудительноdisplay:block незадолго до создания графика. Ничего не работает

Вот моя попытка восстановить графики:

jQuery(document).ready(function() {

    jQuery('.vertical-nav ul li span').click(function(){

        // Target the canvas within the correct tab
        var tabIndex = jQuery(this).parent().index();
        var canvasID = jQuery('.vertical-nav .tab-content:eq( ' + tabIndex + ' ) canvas').attr('id');

        theChart = charts[canvasID].chart;
        builtChart = charts[canvasID].builtChart;

        // Destroy all of the charts so that we can rebuild them
        for (var key in charts) {
            if (charts.hasOwnProperty(key)) {
                charts[key].builtChart.destroy();
            }
        }

        // get the chart data and options from the charts object
        newData = charts[canvasID].data;
        newOptions = charts[canvasID].options;

        // create the new chart
        newChart = document.getElementById(canvasID).getContext("2d");
        new Chart(newChart).Line(newData, newOptions);

    });
})

Постановочный сайт:http://telcomplusplc.uberleaf.com/company/?tab=our-growth

Я даже пытался установить тайм-аут, чтобы отложить генерацию графика до отображения вкладки, но не повезло.

В приведенном выше URL вы можете видеть, что первый график генерируется и восстанавливается, как и должно быть. Это просто остальные из них не (вероятно, потому что они сdisplay:none Див на первое поколение).

Буду признателен за любую оказанную помощь. Рад дать больше информации, если это необходимо.

Обновить

При изменении размера окна диаграмма перерисовывается. Вот код для этого (в chart.js):

// Attach global event to resize each chart instance when the browser resizes
helpers.addEvent(window, "resize", (function(){
    // Basic debounce of resize function so it doesn't hurt performance when resizing browser.
    var timeout;
    return function(){
        clearTimeout(timeout);
        timeout = setTimeout(function(){
            each(Chart.instances,function(instance){
                // If the responsive flag is set in the chart instance config
                // Cascade the resize event down to the chart.
                if (instance.options.responsive){
                    instance.resize(instance.render, true);
                }
            });
        }, 50);
    };
})());

Я думаю, что мне нужно, чтобы иметь возможность запустить это из функции щелчка. Я попытался потерпеть неудачу, мои навыки JS не так хороши.