ChartJS 图表未在选项卡中生成

2022-01-22 00:00:00 jquery tabs javascript chart.js

我正在尝试在选项卡系统中使用 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

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

相关文章