这是我几个小时以来一直在努力的事情,我似乎无法找到有效的解决方案。我有一个页面(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);
由于图表已经在页面创建时绘制,因此无法重绘它们。我不确定该怎么办才能成功获取图表,只有在新标签处于活动状态或类似情况时才能绘制。
答案 0 :(得分:3)
你已经聚集了, 问题是在隐藏选项卡时绘制图表的结果
需要等到第一次绘图之前显示标签
因此,只使用回调绘制第一个图表...
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;
}
});