如何解決重疊的谷歌圖表傳說

這是我一直在工作了幾個小時，現在我似乎無法找到可行的解決方案。我有一個頁面（ASP.NET核心），它有引導標籤。每個選項卡顯示不同的圖表。我已經閱讀了各種答案，並從這個網站和其他網站嘗試了很多不同的東西，但我確定我做錯了什麼。如何解決重疊的谷歌圖表傳說

這是我正在做的概念證明頁面，根據我的理解，我需要停止加載圖表直到選擇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); 
}

圖表a當選擇標籤時會加載正常。除了最初顯示的圖表外，圖例與自身重疊。我試過默認圖表div被隱藏，並且每個選項卡都有一個覆蓋樣式的onclick事件，我嘗試了一些事件，其中一個選項卡處於活動狀態，沒有任何東西似乎可以工作，我只是一直在對我的頭撞擊牆壁。

我懷疑這事做的事實，我打電話

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

而且由於圖表已經對上創建頁面繪製，沒有辦法重新繪製它們。我不知道該怎麼做才能成功獲取圖表，以便只在新選項卡處於活動狀態或類似情況時繪製圖表。

來源

2017-08-16 Mkalafut

爲你收集，
問題是繪製圖表，而標籤被隱藏

需要等待，直到標籤的結果首次繪製

如此前所示只有使用回調繪製第一張圖......

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

一旦回調火災，你不必再調用它，
可以畫出像其他許多C哈茨作爲事後需要

然後等待繪製下圖之前被點擊的選項卡...

這裏，一個switch語句中的href屬性使用，
確定單擊該選項卡，
然後畫出它的圖表...

$('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; 
    } 
});

來源

2017-08-16 17:15:00 WhiteHat

嘿，非常感謝，以確認我的懷疑。在初始腳本執行回調繪製之後，我已將switch語句實現爲視圖上的新腳本，但是當單擊其他選項卡時，選擇列表和標籤顯示，但沒有圖表。 – Mkalafut

我添加了警報而不是交換機中的函數調用，並且它們沒有出現。你提供的代碼看起來像它應該作爲我使用的Bootstrap選項卡的事件工作，但我很困惑，爲什麼當我切換選項卡時什麼也沒有被觸發。 – Mkalafut

對不起，我應該更清楚，我都嘗試過。將其添加到功能中，然後單獨添加到交換機。也沒有開除。 – Mkalafut

如何解決重疊的谷歌圖表傳說

回答

相關問題