Question

我有一个标签条。每个标签条都有自己的手风琴。每支手风琴都有3张谷歌排行榜。只有第一支手风琴能够加载谷歌图表，但其余的标签条无法加载谷歌图表。以下是我的代码：

@model EY.RP.UI.Models.Admin.DashBoardDataModel
@{
    ViewBag.Title = "Dashboard";
}
<!DOCTYPE html>
<html>
<head>
    <script src="@Url.Content("~/Scripts/googleCharts.min.js")"></script>

    <script type="text/javascript">
        google.charts.load('current', { 'packages': ['corechart'] });
        google.charts.setOnLoadCallback(drawVisualization);

        function drawVisualization() {

            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
                },
                //chartArea: {top: 50, bottom: 20,width: '70%', height: '70%' },
                legend: { position: 'top', alignment: 'right', textStyle: { fontSize: 12 } },
                seriesType: 'bars',
                series: { 5: { type: 'line' } },
                responsive: false,
                colors: ['#336699', '#ffe600', '#f04c3e', '#2c973e', '#f04c3e']

            };

            var WritesChart = new google.visualization.ComboChart(document.getElementById('WritesToDb_div'));

            WritesChart.draw(writesData, WritesOptions);

            var WritesChart_Fortnight = new google.visualization.ComboChart(document.getElementById('WritesToDbFortnight_div'));

            WritesChart_Fortnight.draw(writesData, WritesOptions);

            var WritesChart_Year = new google.visualization.ComboChart(document.getElementById('WritesToDbYear_div'));

            WritesChart_Year.draw(writesData, WritesOptions);

            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
                },
                //chartArea: { left: 70, top: 50, bottom: 20, right: 10, width: '70%', height: '100%' },
                legend: { position: 'top', alignment: 'right', textStyle: { fontSize: 12 } },
                seriesType: 'bars',
                series: { 5: { type: 'line' } },
                colors: ['#336699', '#ffe600', '#f04c3e', '#2c973e', '#f04c3e']
            };

            var PageHitschart = new google.visualization.ComboChart(document.getElementById('PageHitschart_div'));
            PageHitschart.draw(PageHitsData, PageHitsOptions);


            var PageHitschart_Fortnight = new google.visualization.ComboChart(document.getElementById('PageHitschartFortnight_div'));
            PageHitschart_Fortnight.draw(PageHitsData, PageHitsOptions);

            var PageHitschart_Year = new google.visualization.ComboChart(document.getElementById('PageHitschartYear_div'));
            PageHitschart_Year.draw(PageHitsData, PageHitsOptions);

            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: '#'
                },
                //chartArea: { left: 70, top: 50, bottom: 20, right: 10, width: '70%', height: '100%' },
                legend: { position: 'top', alignment: 'right', textStyle: { fontSize: 12 } }
            };

            var AppUsageChart = new google.visualization.LineChart(document.getElementById('AppUsagechart_div'));

            AppUsageChart.draw(AppUsage, AppUsageOptions);

            var AppUsageChart_Fortnight = new google.visualization.LineChart(document.getElementById('AppUsagechartFortnight_div'));

            AppUsageChart_Fortnight.draw(AppUsage, AppUsageOptions);

            var AppUsageChart_Year = new google.visualization.LineChart(document.getElementById('AppUsagechartYear_div'));

            AppUsageChart_Year.draw(AppUsage, AppUsageOptions);

            $('#accordion').accordion();
            $('#accordion1').accordion();
            $('#accordion2').accordion();

        }
    </script>

    <style>
        .m-t {
            margin-top: 20px;
        }

        .m-t-nxx {
            margin-top: -30px;
        }

        .text-bold {
            font-weight: bold;
        }

        .ui-accordion .ui-accordion-content {
            overflow: hidden !important;
        }

        .m-t-sm {
            margin-top: 5px;
        }

        .nav-tabsCus {
            border-bottom: none !important;
        }

        @@media screen and (max-width: 1920px) and (max-height:1080px) {
            .rpt-align {
                width: 1600px !important;
                height: 500px !important;
            }
        }

        @@media screen and (max-width: 1600px) and (max-height:900px) {
            .rpt-align {
                width: 1600px !important;
                height: 400px !important;
            }
        }

        @@media screen and (max-width: 1366px) and (max-height:673px) {
            .rpt-align {
                width: 1400px !important;
                height: 400px !important;
            }
        }
    </style>
</head>
<body>
    <!--Div that will hold the dashboard-->
    <div class="container">
        <div class="row">
            <div class="col-lg-12 col-md-12 col-sm-12  m-t-sm">
                <div class="panel with-nav-tabs panel-default">
                    <div class="panel-heading">
                        <ul class="nav nav-tabs nav-tabsCus">
                            <li class="active"><a href="#tab1default" data-toggle="tab">Data Per Day</a></li>
                            <li><a href="#tab2default" data-toggle="tab">Data Per Week</a></li>
                            <li><a href="#tab3default" data-toggle="tab">Data Per Year</a></li>
                        </ul>
                    </div>
                    <div class="panel-body">
                        <div class="tab-content m-t-nxx">
                            <div class="tab-pane fade in active" id="tab1default">
                                <div class="col-lg-12 col-md-12 col-sm-12">
                                    <h3>Total number of unique users who accessed the application the previous day: @Model.UniqueUsersCount</h3>
                                    <div id="accordion">
                                        <h2><i class="fa fa-bar-chart" aria-hidden="true"></i><a href="#" class="text-bold"> Database Writes </a></h2>
                                        <div>
                                            <div id="WritesToDb_div" class="rpt-align" style=""></div>
                                        </div>
                                        <h2><i class="fa fa-bar-chart" aria-hidden="true"></i><a href="#" class="text-bold">Page Hits</a></h2>
                                        <div>
                                            <div id="PageHitschart_div" class="rpt-align" style=""></div>
                                        </div>
                                        <h2><i class="fa fa-bar-chart" aria-hidden="true"></i><a href="#" class="text-bold">Application Usage</a></h2>
                                        <div>
                                            <div id="AppUsagechart_div" class="rpt-align" style=""></div>
                                            <div id="UsersNote" 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>
                                    </div>
                                </div>
                            </div>
                            <div class="tab-pane fade" id="tab2default">
                                <div class="col-lg-12 col-md-12 col-sm-12">
                                    <h3>Total number of unique users who accessed the application the previous day: @Model.UniqueUsersCount</h3>
                                    <div id="accordion1">
                                        <h2><i class="fa fa-bar-chart" aria-hidden="true"></i><a href="#" class="text-bold">Fortnight Database Writes </a></h2>
                                        <div>
                                            <div id="WritesToDbFortnight_div" class="rpt-align" style=""></div>
                                        </div>
                                        <h2><i class="fa fa-bar-chart" aria-hidden="true"></i><a href="#" class="text-bold">Fortnight Page Hits</a></h2>
                                        <div>
                                            <div id="PageHitschartFortnight_div" class="rpt-align" style=""></div>
                                        </div>
                                        <h2><i class="fa fa-bar-chart" aria-hidden="true"></i><a href="#" class="text-bold">Fortnight Application Usage</a></h2>
                                        <div>
                                            <div id="AppUsagechartFortnight_div" class="rpt-align" style=""></div>
                                            <div id="UsersNote" 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>
                                    </div>
                                </div>
                            </div>
                            <div class="tab-pane fade" id="tab3default">
                                <div class="col-lg-12 col-md-12 col-sm-12">
                                    <h3>Total number of unique users who accessed the application the previous day: @Model.UniqueUsersCount</h3>
                                    <div id="accordion2">
                                        <h2><i class="fa fa-bar-chart" aria-hidden="true"></i><a href="#" class="text-bold"> Database Writes </a></h2>
                                        <div>
                                            <div id="WritesToDbYear_div" class="rpt-align" style=""></div>
                                        </div>
                                        <h2><i class="fa fa-bar-chart" aria-hidden="true"></i><a href="#" class="text-bold">Page Hits</a></h2>
                                        <div>
                                            <div id="PageHitschartYear_div" class="rpt-align" style=""></div>
                                        </div>
                                        <h2><i class="fa fa-bar-chart" aria-hidden="true"></i><a href="#" class="text-bold">Application Usage</a></h2>
                                        <div>
                                            <div id="AppUsagechartYear_div" class="rpt-align" style=""></div>
                                            <div id="UsersNote" 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>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

        </div>
    </div>
</body>
</html>

在上面的代码中，div = accordion正在加载。但div id = accordion1和div id = accordion2，谷歌图表没有加载，但手风琴工作正常。请帮忙。

Answer 1

请参阅以下工作代码段...

激活/创建面板时绘制每个图表，
当窗口调整大小时，如果容器可见......

＆＃13;

google.charts.load('current', {
  packages:['controls', 'corechart', 'table']
}).then(function () {
  var dataTables = {};
  dataTables.a = google.visualization.arrayToDataTable([
    ['x', 'y'],
    [1, 1],
    [2, 2],
    [3, 3],
    [4, 4],
    [5, 5]
  ]);
  dataTables.b = google.visualization.arrayToDataTable([
    ['x', 'y'],
    [6, 6],
    [7, 7],
    [8, 8],
    [9, 9],
    [10, 10]
  ]);
  dataTables.c = google.visualization.arrayToDataTable([
    ['x', 'y'],
    [11, 11],
    [12, 12],
    [13, 13],
    [14, 14],
    [15, 15]
  ]);

  var containers = {};
  containers.a = document.getElementById('chart-a');
  containers.b = document.getElementById('chart-b');
  containers.c = document.getElementById('chart-c');

  var charts = {};
  charts.a = new google.visualization.ColumnChart(containers.a);
  charts.b = new google.visualization.ColumnChart(containers.b);
  charts.c = new google.visualization.ColumnChart(containers.c);

  var options = {};
  options.a = {
    colors: ['cyan']
  };
  options.b = {
    colors: ['magenta']
  };
  options.c = {
    colors: ['lime']
  };

  $('#accordion').accordion({
    activate: drawChart,
    create: drawChart
  });

  function drawChart(event, ui) {
    var panel = ui.panel || ui.newPanel;
    var panelId = $(panel).data('panel');
    charts[panelId].draw(dataTables[panelId], options[panelId]);
  }

  $(window).resize(function() {
    for (var id in containers) {
      if (containers.hasOwnProperty(id)) {
        if ($(containers[id]).is(':visible')) {
          charts[id].draw(dataTables[id], options[id]);
        }
      }
    }
  });
});

＆＃13;

.chart {
  height: 276px;
}

＆＃13;

<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="accordion">
  <h3>Section 1</h3>
  <div data-panel="a">
    <div class="chart" id="chart-a"></div>
  </div>
  <h3>Section 2</h3>
  <div data-panel="b">
    <div class="chart" id="chart-b"></div>
  </div>
  <h3>Section 3</h3>
  <div data-panel="c">
    <div class="chart" id="chart-c"></div>
  </div>
</div>

＆＃13;

无法在Accordion中加载GoogleChart

1 个答案: