ChartJS图表不在选项卡中生成 [英] ChartJS charts not generating within tabs

问题描述

我正在尝试在标签系统中使用ChartsJS。第一个选项卡中的第一个图表被渲染，但后续图表没有。

I'm trying to use ChartsJS within a tabbing system. The first chart in the first tab is rendered, but subsequent charts are not.

我认为这是因为选项卡 display：none ，所以当第一次生成图表时，它们是在零维度的div中创建的。

I believe this is because the tabs have display:none, so when the charts are first generated they are created in a div with zero dimensions.

这解决了问题，但打破了标签：

This fixes the issue, but breaks the tabs:

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

考虑到这一点，我尝试了各种方法来重新生成图表选项卡打开后，或在生成图表之前强制 display：block 。没有任何作用。

With that in mind I've tried all kinds of ways to regenerate the charts after the tab is open, or force display:block just before generating the chart. Nothing works.

这是我尝试重新生成图表：

Here's my attempt to regenerate the charts:

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

我甚至尝试设置超时来延迟图表生成，直到显示标签，但没有运气。

I've even tried setting a timeout to delay the chart generation until the tab is displayed, but no luck.

你可以在第一个图表生成并重新生成的URL。只是其他人没有（大概是因为他们在第一代时使用 display：none div）。

You can see in the URL above that the first chart generates and regenerates as it should. It's just the rest of them that don't (presumably because they are with a display:none div on first generation).

非常感谢任何帮助。很高兴在需要时提供更多信息。

Any help is much appreciated. Happy to give more info if needed.

更新

调整窗口大小后，将重新绘制图表。这是代码（在chart.js中）：

When the window is resized, the chart is redrawn. Here's the code for that (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);
    };
})());

我认为我需要的是能够通过点击功能触发它。我尝试过失败，我的JS技能不是那么好。

I think what I need is to be able to fire that from a click function. I've tried an failed, my JS skills aren't that good.

推荐答案

如果你使用display：none那么chartjs不会不知道制作图表的大小，然后不知道。如果切换到jquery.hide（）/ show（），它将起作用。这是一个 jsfiddle

If you use display:none then chartjs doesn't know the size to make the chart and then doesn't. If you switch to jquery.hide()/show() it will work. Here's a jsfiddle

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

*The fiddle works without it but if you have a lot of content then you may need to also hide the area temporarily.

Javascript

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

这篇关于ChartJS图表不在选项卡中生成的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！