Estou tentando usar o ChartsJS em um sistema de guias. O primeiro gráfico na primeira guia é renderizado, mas os gráficos subsequentes não são.

Eu acredito que isso ocorre porque as guias têmdisplay:none, portanto, quando os gráficos são gerados pela primeira vez, eles são criados em uma div com zero dimensões.

Isso corrige o problema, mas quebra as guias:

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

Com isso em mente, tentei todos os tipos de maneiras de regenerar os gráficos após a aba ser aberta ou forçardisplay:block imediatamente antes de gerar o gráfico. Nada funciona.

Aqui está minha tentativa de regenerar os gráficos:

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);

    });
})

O site de preparação é:http://telcomplusplc.uberleaf.com/company/?tab=our-growth

Eu até tentei definir um tempo limite para atrasar a geração do gráfico até que a guia seja exibida, mas sem sorte.

Você pode ver no URL acima que o primeiro gráfico gera e gera novamente como deveria. É apenas o resto deles que não (presumivelmente porque eles estão com umdisplay:none div na primeira geração).

Qualquer ajuda é muito apreciada. É um prazer dar mais informações, se necessário.

Atualizar

Quando a janela é redimensionada, o gráfico é redesenhado. Aqui está o código para isso (no 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);
    };
})());

Eu acho que o que preciso é ser capaz de disparar isso a partir de uma função de clique. Eu tentei uma falha, minhas habilidades em JS não são tão boas.