Ich versuche, ChartsJS in einem Tab-System zu verwenden. Das erste Diagramm auf der ersten Registerkarte wird gerendert, nachfolgende Diagramme jedoch nicht.

Ich glaube, das liegt daran, dass die Registerkarten @ habdisplay:none, also wenn die Diagramme zum ersten Mal generiert werden, werden sie in einem Div mit null Dimensionen erstellt.

Dies behebt das Problem, bricht jedoch die Tabs:

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

Vor diesem Hintergrund habe ich alle möglichen Möglichkeiten ausprobiert, um die Diagramme neu zu generieren, nachdem die Registerkarte geöffnet wurde, oder um @ zu erzwingedisplay:block kurz vor dem Generieren des Diagramms. Nichts funktioniert

Hier ist mein Versuch, die Diagramme neu zu generieren:

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

    });
})

Die Staging-Site lautet:http: //telcomplusplc.uberleaf.com/company/? tab = our-growth

Ich habe sogar versucht, eine Zeitüberschreitung festzulegen, um die Erstellung des Diagramms zu verzögern, bis die Registerkarte angezeigt wird, aber kein Glück.

Sie können in der obigen URL sehen, dass das erste Diagramm so generiert und neu generiert wird, wie es sollte. Es ist nur der Rest von ihnen, der dies nicht tut (vermutlich, weil sie mit einemdisplay:none Div auf der ersten Generation).

Jede Hilfe wird sehr geschätzt. Gerne geben wir bei Bedarf weitere Informationen.

Aktualisiere

Wenn die Größe des Fensters geändert wird, wird das Diagramm neu gezeichnet. Hier ist der Code dafür (in 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);
    };
})());

Ich denke, was ich brauche, ist in der Lage zu sein, das über eine Klickfunktion auszulösen. Ich habe versucht, eine gescheiterte, meine JS-Fähigkeiten sind nicht so gut.