Question

这是我几个小时以来一直在努力的事情，我似乎无法找到有效的解决方案。我有一个页面（ASP.NET Core），它上面有引导标签。每个选项卡显示不同的图表。我已经阅读了各种答案，并尝试过这个和其他网站上的许多不同的东西，但我确定我做错了。

这是我正在制作的概念页面证明，根据我的理解，我需要停止加载图表，直到选择nav-tab为止。这就是我不确定该怎么做。

我的观点：

<html>
<head>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script type="text/javascript" src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>


<!--Load the AJAX API-->
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>

@Html.Partial("~/Views/Shared/Chart_ByMonth.cshtml")
@Html.Partial("~/Views/Shared/Chart_ByMonthAndQuarter.cshtml")
@Html.Partial("~/Views/Shared/Chart_ByLeaseAdmin.cshtml")
@Html.Partial("~/Views/Shared/Chart_Fourth.cshtml")

<script type="text/javascript">
    // Load the Visualization API and the corechart package.
    google.charts.load('current', {'packages':['corechart']});

    // Set a callback to run when the Google Visualization API is loaded.
    google.charts.setOnLoadCallback(drawMonthChart);
    google.charts.setOnLoadCallback(drawMonthAndQuarterChart);
    google.charts.setOnLoadCallback(drawLeaseAdminChart);
    google.charts.setOnLoadCallback(drawFourthChart);
</script>

<body>
<ul class="nav nav-tabs" id="tabs">
        <li class="active" id="tab_1"><a data-toggle="tab" href="#home">By Month</a></li>
        <li id="tab_2"><a data-toggle="tab" href="#menu1">By Month & Quarter</a></li>
        <li id="tab_3"><a data-toggle="tab" href="#menu2">By Lease Admin</a></li>
        <li id="tab_4"><a data-toggle="tab" href="#menu3">Fourth Chart</a></li>
    </ul>
    <div class="tab-content">
        <div id="home" class="tab-pane fade in active">
            <h3>By Month</h3>
            <select>
                <option selected>January</option>
                <option>February</option>
                <option>March</option>
                <option>April</option>
                <option>May</option>
                <option>June</option>
                <option>July</option>
                <option>August</option>
                <option>September</option>
                <option>October</option>
                <option>November</option>
                <option>December</option>
            </select>
            <select>
                <option>2016</option>
                <option>2017</option>
            </select>
            <button type="submit" class="btn btn-success">Submit</button>
            <div id="chart_month_div" style="padding-top: 20px;"></div>
        </div>
.....
</div>
</body>

该图表的局部视图只是硬编码数据，再次是概念证明页面：

<script type="text/javascript">


function drawMonthAndQuarterChart() {

    // Create the data table.
    var data = google.visualization.arrayToDataTable([
        ['Type', 'Cash', 'Credit', { role: 'annotation' }],
        ['January', 10, 24, ''],
        ['February', 16, 22, ''],
        ['March', 28, 19, '']
    ]);

    // Set chart options
    var options = {
        width: 1200,
        height: 400,
        legend: { position: 'top', maxLines: 3 },
        bar: { groupWidth: '75%' },
        isStacked: true,

        hAxis: {
            minValue: 0,
            title: 'Approvals for the month & quarter'
        }

    };


    // Instantiate and draw our chart, passing in some options.
    var chartMonthandquarter = new google.visualization.BarChart(document.getElementById('chart_monthandquarter_div'));
    chartMonthandquarter.draw(data, options);
}

选择标签时，所有图表都会正常加载。除最初显示的图表外，图例与其自身重叠。我已经尝试将图表div隐藏起来并且每个选项卡都有一个onclick事件来覆盖样式，我已经尝试过一个事件，其中一个选项卡处于活动状态，似乎没有任何工作，我只是一直在打击我的头部墙。

我怀疑它与我正在调用

这一事实有关

google.charts.setOnLoadCallback(drawMonthAndQuarterChart);
google.charts.setOnLoadCallback(drawLeaseAdminChart);
google.charts.setOnLoadCallback(drawFourthChart);

由于图表已经在页面创建时绘制，因此无法重绘它们。我不确定该怎么办才能成功获取图表，只有在新标签处于活动状态或类似情况时才能绘制。

Answer 1

你已经聚集了，问题是在隐藏选项卡时绘制图表的结果

需要等到第一次绘图之前显示标签

因此，只使用回调绘制第一个图表...

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

一旦回叫开始，你就不必再打电话了，
你可以根据需要绘制尽可能多的图表

然后等待单击选项卡，然后再绘制下一个图表...

这里，在href属性上使用switch语句，
确定单击了哪个选项卡，
然后画出它的图表......

$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
    switch ($(e.target).attr('href')) {
      case '#home':
        drawMonthChart();
        break;

      case '#menu1':
        drawMonthAndQuarterChart();
        break;

      case '#menu2':
        drawLeaseAdminChart();
        break;

      case '#menu3':
        drawFourthChart();
        break;
    }
});

如何修复重叠的Google图表图例

1 个答案: