ChartJS 图表未在选项卡内生成

Question

我正在尝试在选项卡系统中使用 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在第一代有一个div）。

任何帮助深表感谢。如果需要，很乐意提供更多信息。

更新

调整窗口大小时，会重新绘制图表。这是代码（在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技能不是那么好。

Answer 1

如果您使用 display:none 则 chartjs 不知道制作图表的大小，然后也不知道。如果您切换到 jquery.hide()/show() 它将起作用。这是一个jsfiddle

*小提琴在没有它的情况下工作，但如果您有很多内容，那么您可能还需要暂时隐藏该区域。

Javascript

var data1 = {
    labels: ["January", "February", "March", "April", "May", "June", "July"],
    datasets: [{ data: [65, 59, 80, 81, 56, 55, 40] }]
};
var data2 = {
    labels: ["January", "February", "March", "April", "May", "June", "July"],
    datasets: [{ data: [65, 59, 80, 81, 56, 55, 40] }]
};

// Load each chart and hide() the tab immediately.

var ctx = document.getElementById('chart1').getContext('2d');
var chart1 = new Chart(ctx).Bar(data1);
$('#tab1').hide();

var ctx = document.getElementById('chart2').getContext('2d');
var chart2 = new Chart(ctx).Line(data2);
$('#tab2').hide();

/* 
// will not work because chart is not rendered
$('#tab1_btn').on('click',function(){ 
    $('#tab1').css('display','block'); 
    $('#tab2').css('display','none') })
$('#tab2_btn').on('click',function(){ 
    $('#tab1').css('display','none'); 
    $('#tab2').css('display','block') })
*/

$('#tab1_btn').on('click',function(){ 
    $('#tab1').show(); 
    $('#tab2').hide() 
})
$('#tab2_btn').on('click',function(){ 
    $('#tab1').hide(); 
    $('#tab2').show() 
})

// if you have a lot of content in multiple tabs 
// it may be necessary to temporarily cover the content
$('#tab_cover').hide();

HTML

<button id="tab1_btn">tab1</button>
<button id="tab2_btn">tab2</button>
<div id="tab_cover"> </div>
<div id="tabs">
    <div id="tab1" class="tab">
        <canvas id="chart1" class="chart" width="400" height="300"></canvas>
    </div>
    <div id="tab2" class="tab">
        <canvas id="chart2" class="chart" width="400" height="300"></canvas>
    </div>
</div>

CSS

/* will not work because chart is not rendered
.tab { display:none } */
.chart { width:50% }
.float { float:right; width:50%; }
#tab_cover { background:#9ff; height: 100% !important; width:100%; position: absolute; z-index: 300; }