Хорошо, с моей стороны были некоторые дополнительные проблемы, но твой код действительно работал, как только я решил их. Большое спасибо за помощь!
о, над чем я работаю часами, и я не могу найти решение, которое работает. У меня есть страница (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);
и поскольку диаграммы уже нарисованы прямо при создании страницы, их невозможно перерисовать. То, что я не уверен, как это сделать, - это заставить графики рисовать только тогда, когда активна новая вкладка или что-то подобное.