Tab页签仅首个Accordion能加载Google Chart，其余无法加载求助

这个问题的核心原因很明确：当Google Charts尝试渲染图表时，如果目标容器处于隐藏状态（display: none），它无法正确计算容器的尺寸，导致渲染失败。你的代码在页面加载时一次性渲染了所有标签页的图表，但此时tab2default和tab3default是隐藏的，所以这两个标签页里的图表根本没渲染成功。

下面是具体的修复方案，分两步走：

步骤1：拆分图表渲染函数，按需加载 #

把每个标签页的图表渲染逻辑拆成独立函数，只在标签页被激活时才渲染对应图表，同时避免重复渲染：

google.charts.load('current', { 'packages': ['corechart'] });
google.charts.setOnLoadCallback(initPage);

// 初始化页面：绑定事件+渲染默认标签页图表
function initPage() {
    // 初始化所有折叠面板
    $('#accordion').accordion();
    $('#accordion1').accordion();
    $('#accordion2').accordion();
    
    // 渲染默认激活的每日标签页图表
    drawDailyCharts();
    
    // 监听标签页切换事件，切换时渲染对应图表
    $('.nav-tabs a').on('shown.bs.tab', function (e) {
        var targetTab = $(e.target).attr('href');
        switch(targetTab) {
            case '#tab1default':
                drawDailyCharts();
                break;
            case '#tab2default':
                drawFortnightCharts();
                break;
            case '#tab3default':
                drawYearlyCharts();
                break;
        }
    });
}

// 渲染每日标签页的图表
function drawDailyCharts() {
    // Database Writes 图表
    var WritesToDbData = [];
    WritesToDbData.push(['Time', 'Account', 'Offering Group', 'TER Variance']);
    @foreach (var writesToDb in Model.WritesToDbVM) {
        @:WritesToDbData.push(["@writesToDb.TimeRange",@writesToDb.AccountTemplate,@writesToDb.OfferingGroupTemplate,@writesToDb.TERVarianceTemplate]);
    }
    var writesData = google.visualization.arrayToDataTable(WritesToDbData);
    var WritesOptions = {
        title: '',
        vAxis: { title: 'Database Writes', format: '#' },
        hAxis: { title: 'Time of the Day', gridlines: { count: 23 }, slantedText: true, slantedTextAngle: 45 },
        legend: { position: 'top', alignment: 'right', textStyle: { fontSize: 12 } },
        seriesType: 'bars',
        series: { 5: { type: 'line' } },
        responsive: false,
        colors: ['#336699', '#ffe600', '#f04c3e', '#2c973e', '#f04c3e']
    };
    // 检查容器是否为空，避免重复渲染
    if ($('#WritesToDb_div').html().trim() === '') {
        var WritesChart = new google.visualization.ComboChart(document.getElementById('WritesToDb_div'));
        WritesChart.draw(writesData, WritesOptions);
    }

    // Page Hits 图表
    var PageHitsDBData = [];
    PageHitsDBData.push(['Time', 'Account', 'Offering Group', 'TER Variance', 'Admin']);
    @foreach (var pageHitsDb in Model.PageHitsDbVM) {
        @:PageHitsDBData.push(["@pageHitsDb.TimeRange",@pageHitsDb.AccountTemplate,@pageHitsDb.OfferingGroupTemplate,@pageHitsDb.TERVarianceTemplate,@pageHitsDb.AdminTemplate]);
    }
    var PageHitsData = google.visualization.arrayToDataTable(PageHitsDBData);
    var PageHitsOptions = {
        title: '',
        vAxis: { title: 'Page Hits', format: '#' },
        hAxis: { title: 'Time of the Day', slantedText: true, slantedTextAngle: 45 },
        legend: { position: 'top', alignment: 'right', textStyle: { fontSize: 12 } },
        seriesType: 'bars',
        series: { 5: { type: 'line' } },
        colors: ['#336699', '#ffe600', '#f04c3e', '#2c973e', '#f04c3e']
    };
    if ($('#PageHitschart_div').html().trim() === '') {
        var PageHitschart = new google.visualization.ComboChart(document.getElementById('PageHitschart_div'));
        PageHitschart.draw(PageHitsData, PageHitsOptions);
    }

    // Application Usage 图表
    var AppUsagedata = [];
    AppUsagedata.push(['Time', 'Count'], [0, 0]);
    @foreach (var appUsgDb in Model.MaxUsage) {
        @:AppUsagedata.push([@appUsgDb.TimeRange,@appUsgDb.Count]);
    }
    var AppUsage = google.visualization.arrayToDataTable(AppUsagedata);
    var AppUsageOptions = {
        title: '',
        annotations: { alwaysOutside: true, textStyle: { fontSize: 14, color: '#000', auraColor: 'none' } },
        hAxis: { title: 'Time', gridlines: { count: 12 }, format: 'short', ticks: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24], slantedText: true, slantedTextAngle: 45 },
        vAxis: { title: 'Count', format: '#' },
        legend: { position: 'top', alignment: 'right', textStyle: { fontSize: 12 } }
    };
    if ($('#AppUsagechart_div').html().trim() === '') {
        var AppUsageChart = new google.visualization.LineChart(document.getElementById('AppUsagechart_div'));
        AppUsageChart.draw(AppUsage, AppUsageOptions);
    }
}

// 渲染双周标签页的图表
function drawFortnightCharts() {
    // Database Writes 图表
    var WritesToDbData = [];
    WritesToDbData.push(['Time', 'Account', 'Offering Group', 'TER Variance']);
    @foreach (var writesToDb in Model.WritesToDbVM) {
        @:WritesToDbData.push(["@writesToDb.TimeRange",@writesToDb.AccountTemplate,@writesToDb.OfferingGroupTemplate,@writesToDb.TERVarianceTemplate]);
    }
    var writesData = google.visualization.arrayToDataTable(WritesToDbData);
    var WritesOptions = {
        title: '',
        vAxis: { title: 'Database Writes', format: '#' },
        hAxis: { title: 'Time of the Day', gridlines: { count: 23 }, slantedText: true, slantedTextAngle: 45 },
        legend: { position: 'top', alignment: 'right', textStyle: { fontSize: 12 } },
        seriesType: 'bars',
        series: { 5: { type: 'line' } },
        responsive: false,
        colors: ['#336699', '#ffe600', '#f04c3e', '#2c973e', '#f04c3e']
    };
    if ($('#WritesToDbFortnight_div').html().trim() === '') {
        var WritesChart_Fortnight = new google.visualization.ComboChart(document.getElementById('WritesToDbFortnight_div'));
        WritesChart_Fortnight.draw(writesData, WritesOptions);
    }

    // Page Hits 图表
    var PageHitsDBData = [];
    PageHitsDBData.push(['Time', 'Account', 'Offering Group', 'TER Variance', 'Admin']);
    @foreach (var pageHitsDb in Model.PageHitsDbVM) {
        @:PageHitsDBData.push(["@pageHitsDb.TimeRange",@pageHitsDb.AccountTemplate,@pageHitsDb.OfferingGroupTemplate,@pageHitsDb.TERVarianceTemplate,@pageHitsDb.AdminTemplate]);
    }
    var PageHitsData = google.visualization.arrayToDataTable(PageHitsDBData);
    var PageHitsOptions = {
        title: '',
        vAxis: { title: 'Page Hits', format: '#' },
        hAxis: { title: 'Time of the Day', slantedText: true, slantedTextAngle: 45 },
        legend: { position: 'top', alignment: 'right', textStyle: { fontSize: 12 } },
        seriesType: 'bars',
        series: { 5: { type: 'line' } },
        colors: ['#336699', '#ffe600', '#f04c3e', '#2c973e', '#f04c3e']
    };
    if ($('#PageHitschartFortnight_div').html().trim() === '') {
        var PageHitschart_Fortnight = new google.visualization.ComboChart(document.getElementById('PageHitschartFortnight_div'));
        PageHitschart_Fortnight.draw(PageHitsData, PageHitsOptions);
    }

    // Application Usage 图表
    var AppUsagedata = [];
    AppUsagedata.push(['Time', 'Count'], [0, 0]);
    @foreach (var appUsgDb in Model.MaxUsage) {
        @:AppUsagedata.push([@appUsgDb.TimeRange,@appUsgDb.Count]);
    }
    var AppUsage = google.visualization.arrayToDataTable(AppUsagedata);
    var AppUsageOptions = {
        title: '',
        annotations: { alwaysOutside: true, textStyle: { fontSize: 14, color: '#000', auraColor: 'none' } },
        hAxis: { title: 'Time', gridlines: { count: 12 }, format: 'short', ticks: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24], slantedText: true, slantedTextAngle: 45 },
        vAxis: { title: 'Count', format: '#' },
        legend: { position: 'top', alignment: 'right', textStyle: { fontSize: 12 } }
    };
    if ($('#AppUsagechartFortnight_div').html().trim() === '') {
        var AppUsageChart_Fortnight = new google.visualization.LineChart(document.getElementById('AppUsagechartFortnight_div'));
        AppUsageChart_Fortnight.draw(AppUsage, AppUsageOptions);
    }
}

// 渲染年度标签页的图表
function drawYearlyCharts() {
    // Database Writes 图表
    var WritesToDbData = [];
    WritesToDbData.push(['Time', 'Account', 'Offering Group', 'TER Variance']);
    @foreach (var writesToDb in Model.WritesToDbVM) {
        @:WritesToDbData.push(["@writesToDb.TimeRange",@writesToDb.AccountTemplate,@writesToDb.OfferingGroupTemplate,@writesToDb.TERVarianceTemplate]);
    }
    var writesData = google.visualization.arrayToDataTable(WritesToDbData);
    var WritesOptions = {
        title: '',
        vAxis: { title: 'Database Writes', format: '#' },
        hAxis: { title: 'Time of the Day', gridlines: { count: 23 }, slantedText: true, slantedTextAngle: 45 },
        legend: { position: 'top', alignment: 'right', textStyle: { fontSize: 12 } },
        seriesType: 'bars',
        series: { 5: { type: 'line' } },
        responsive: false,
        colors: ['#336699', '#ffe600', '#f04c3e', '#2c973e', '#f04c3e']
    };
    if ($('#WritesToDbYear_div').html().trim() === '') {
        var WritesChart_Year = new google.visualization.ComboChart(document.getElementById('WritesToDbYear_div'));
        WritesChart_Year.draw(writesData, WritesOptions);
    }

    // Page Hits 图表
    var PageHitsDBData = [];
    PageHitsDBData.push(['Time', 'Account', 'Offering Group', 'TER Variance', 'Admin']);
    @foreach (var pageHitsDb in Model.PageHitsDbVM) {
        @:PageHitsDBData.push(["@pageHitsDb.TimeRange",@pageHitsDb.AccountTemplate,@pageHitsDb.OfferingGroupTemplate,@pageHitsDb.TERVarianceTemplate,@pageHitsDb.AdminTemplate]);
    }
    var PageHitsData = google.visualization.arrayToDataTable(PageHitsDBData);
    var PageHitsOptions = {
        title: '',
        vAxis: { title: 'Page Hits', format: '#' },
        hAxis: { title: 'Time of the Day', slantedText: true, slantedTextAngle: 45 },
        legend: { position: 'top', alignment: 'right', textStyle: { fontSize: 12 } },
        seriesType: 'bars',
        series: { 5: { type: 'line' } },
        colors: ['#336699', '#ffe600', '#f04c3e', '#2c973e', '#f04c3e']
    };
    if ($('#PageHitschartYear_div').html().trim() === '') {
        var PageHitschart_Year = new google.visualization.ComboChart(document.getElementById('PageHitschartYear_div'));
        PageHitschart_Year.draw(PageHitsData, PageHitsOptions);
    }

    // Application Usage 图表
    var AppUsagedata = [];
    AppUsagedata.push(['Time', 'Count'], [0, 0]);
    @foreach (var appUsgDb in Model.MaxUsage) {
        @:AppUsagedata.push([@appUsgDb.TimeRange,@appUsgDb.Count]);
    }
    var AppUsage = google.visualization.arrayToDataTable(AppUsagedata);
    var AppUsageOptions = {
        title: '',
        annotations: { alwaysOutside: true, textStyle: { fontSize: 14, color: '#000', auraColor: 'none' } },
        hAxis: { title: 'Time', gridlines: { count: 12 }, format: 'short', ticks: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24], slantedText: true, slantedTextAngle: 45 },
        vAxis: { title: 'Count', format: '#' },
        legend: { position: 'top', alignment: 'right', textStyle: { fontSize: 12 } }
    };
    if ($('#AppUsagechartYear_div').html().trim() === '') {
        var AppUsageChart_Year = new google.visualization.LineChart(document.getElementById('AppUsagechartYear_div'));
        AppUsageChart_Year.draw(AppUsage, AppUsageOptions);
    }
}

步骤2：修复HTML的id唯一性问题（推荐） #

你的HTML里有多个相同id="UsersNote"的元素，这违反了HTML规范（id必须唯一），建议修改为class或者不同的id，比如：

<!-- 每日标签页的提示 -->
<div class="users-note" style="align-content:center;">
    <label style="color:red;">Note: The above chart displays sum of template and admin page hits of all users for the previous day</label>
</div>

<!-- 双周标签页的提示 -->
<div class="users-note" style="align-content:center;">
    <label style="color:red;">Note: The above chart displays sum of template and admin page hits of all users for the past fortnight</label>
</div>

<!-- 年度标签页的提示 -->
<div class="users-note" style="align-content:center;">
    <label style="color:red;">Note: The above chart displays sum of template and admin page hits of all users for the past year</label>
</div>

方案生效的原因 #

1. 按需渲染：只有当