无法在隐藏的容器上绘制Google图表。人们建议没有解决方法：
我正在使用以下代码，但它不能100％运行：
<script type="text/javascript"> $('#Tab2').click(function (e) { drawChart(); }); </script>
我想仅在单击选项卡时才渲染图表。有可能吗？
更新
<script type="text/javascript">
google.load('visualization', '1', {packages: ['controls']});
google.setOnLoadCallback(drawChart);
function drawChart() {
var data = new google.visualization.DataTable();
data.addColumn('date', 'Período');
data.addColumn('number', 'TOTAL');
data.addColumn('number', 'FECHADOS');
data.addColumn('number', 'EM ABERTO');
data.addRows([
[new Date(2014, 3), 16, 13, 3],
[new Date(2014, 2), 34, 30, 4],
[new Date(2014, 1), 33, 30, 3],
[new Date(2014, 0), 26, 19, 7],
[new Date(2013, 11), 26, 23, 3],
[new Date(2013, 10), 43, 40, 3],
[new Date(2013, 9), 38, 34, 4],
[new Date(2013, 8), 41, 40, 1],
[new Date(2013, 7), 42, 40, 2],
[new Date(2013, 6), 31, 31, 0],
[new Date(2013, 5), 24, 23, 1],
[new Date(2013, 4), 29, 29, 0],
[new Date(2013, 3), 37, 37, 0],
[new Date(2013, 2), 39, 39, 0],
[new Date(2013, 1), 29, 29, 0],
[new Date(2013, 0), 42, 42, 0],
[new Date(2012, 11), 23, 23, 0],
[new Date(2012, 10), 26, 26, 0],
[new Date(2012, 9), 32, 32, 0],
[new Date(2012, 8), 30, 30, 0],
[new Date(2012, 7), 31, 31, 0],
[new Date(2012, 6), 35, 35, 0],
[new Date(2012, 5), 40, 40, 0],
[new Date(2012, 4), 44, 44, 0],
[new Date(2012, 3), 26, 26, 0],
[new Date(2012, 2), 19, 19, 0],
[new Date(2012, 1), 27, 27, 0],
[new Date(2012, 0), 21, 21, 0],
[new Date(2011, 11), 24, 24, 0],
[new Date(2011, 10), 19, 19, 0],
[new Date(2011, 9), 21, 21, 0],
[new Date(2011, 8), 16, 16, 0]
]);
var dateFormat = new google.visualization.DateFormat({pattern: 'MMM/y'});
dateFormat.format(data, 0);
var rangeFilter = new google.visualization.ControlWrapper({
controlType: 'ChartRangeFilter',
containerId: 'range_filter_div',
options: {
filterColumnIndex: 0,
ui: {
chartOptions: {
height: 50,
fontName: ["Roboto Condensed"],
fontSize: ['13'],
backgroundColor: '#FFFFFF',
width: '85%', // must be the same in both the chart and the control
chartArea: {
width: '85%' // must be the same in both the chart and the control
},
hAxis: {
format: 'MMM/y'
}
},
chartView: {
columns: [0, 1]
}
}
},
state: {
range: {
start: new Date(2013, 3),
end: new Date(2014, 3)
}
}
});
var chart = new google.visualization.ChartWrapper({
chartType: 'AreaChart',
containerId: 'chart_div',
options: {
chartArea: {
width: '85%',
height: '50%'
},
width: '85%', // must be the same in both the chart and the control
height: 300,
fontName: ["Roboto Condensed"],
backgroundColor: '#FFFFFF',
colors: ['#5cb85c','#e0fde0', '#d9534f'],
curveType: ['none'],
fontSize: ['13'],
hAxis: {
title: 'Período',
titleTextStyle: {
italic: false,
color: 'black',
fontSize: 15
},
format: 'MMM/y'
},
legend: {
position: 'right',
textStyle: {
color: 'black',
fontSize: 12
}
},
lineWidth: 2,
pointSize: 5,
tooltip: {
textStyle: {
color: 'Black'
},
showColorCode: false,
}
}
});
var dash= new google.visualization.Dashboard(document.getElementById('dashboard'));
dash.bind([rangeFilter], [chart]);
dash.draw(data);
$(document).ready(function () {
$(window).resize(function(){
drawChart();
});
});
}
</script>
<script type="text/javascript">
google.load('visualization', '1', {packages: ['controls']});
google.setOnLoadCallback(drawChart_a);
function drawChart_a() {
var data = new google.visualization.DataTable();
data.addColumn('date', 'Período');
data.addColumn('number', 'ABERTOS');
data.addColumn('number', 'FECHADOS');
data.addColumn('number', 'BACKLOG');
data.addRows([
[new Date(2014, 3), 16, 13, 3],
[new Date(2014, 2), 34, 30, 4],
[new Date(2014, 1), 33, 30, 3],
[new Date(2014, 0), 26, 19, 7],
[new Date(2013, 11), 26, 23, 3],
[new Date(2013, 10), 43, 40, 3],
[new Date(2013, 9), 38, 34, 4],
[new Date(2013, 8), 41, 40, 1],
[new Date(2013, 7), 42, 40, 2],
[new Date(2013, 6), 31, 31, 0],
[new Date(2013, 5), 24, 23, 1],
[new Date(2013, 4), 29, 29, 0],
[new Date(2013, 3), 37, 37, 0],
[new Date(2013, 2), 39, 39, 0],
[new Date(2013, 1), 29, 29, 0],
[new Date(2013, 0), 42, 42, 0],
[new Date(2012, 11), 23, 23, 0],
[new Date(2012, 10), 26, 26, 0],
[new Date(2012, 9), 32, 32, 0],
[new Date(2012, 8), 30, 30, 0],
[new Date(2012, 7), 31, 31, 0],
[new Date(2012, 6), 35, 35, 0],
[new Date(2012, 5), 40, 40, 0],
[new Date(2012, 4), 44, 44, 0],
[new Date(2012, 3), 26, 26, 0],
[new Date(2012, 2), 19, 19, 0],
[new Date(2012, 1), 27, 27, 0],
[new Date(2012, 0), 21, 21, 0],
[new Date(2011, 11), 24, 24, 0],
[new Date(2011, 10), 19, 19, 0],
[new Date(2011, 9), 21, 21, 0],
[new Date(2011, 8), 16, 16, 0]
]);
var dateFormat = new google.visualization.DateFormat({pattern: 'MMM/y'});
dateFormat.format(data, 0);
var rangeFilter = new google.visualization.ControlWrapper({
controlType: 'ChartRangeFilter',
containerId: 'range_filter_div_a',
options: {
filterColumnIndex: 0,
ui: {
chartOptions: {
height: 50,
fontName: ["Roboto Condensed"],
fontSize: ['13'],
backgroundColor: '#FFFFFF',
width: '85%', // must be the same in both the chart and the control
chartArea: {
width: '85%' // must be the same in both the chart and the control
},
hAxis: {
format: 'MMM/y'
}
},
chartView: {
columns: [0, 1]
}
}
},
state: {
range: {
start: new Date(2013, 3),
end: new Date(2014, 3)
}
}
});
var chart = new google.visualization.ChartWrapper({
chartType: 'AreaChart',
containerId: 'chart_div_a',
options: {
chartArea: {
width: '85%',
height: '50%'
},
width: '85%', // must be the same in both the chart and the control
height: 300,
fontName: ["Roboto Condensed"],
backgroundColor: '#FFFFFF',
colors: ['#5cb85c','#e0fde0', '#d9534f'],
curveType: ['none'],
fontSize: ['13'],
hAxis: {
title: 'Período',
titleTextStyle: {
italic: false,
color: 'black',
fontSize: 15
},
format: 'MMM/y'
},
legend: {
position: 'right',
textStyle: {
color: 'black',
fontSize: 12
}
},
lineWidth: 2,
pointSize: 5,
tooltip: {
textStyle: {
color: 'Black'
},
showColorCode: false,
}
}
});
var dash= new google.visualization.Dashboard(document.getElementById('dashboard_a'));
dash.bind([rangeFilter], [chart]);
dash.draw(data);
$(document).ready(function () {
$(window).resize(function(){
drawChart_a();
});
});
}
</script>
<div class="tabbable top-margin-medium" style="padding-right: 15px; padding-left: 15px;">
<ul class="nav nav-tabs" data-tabs="tabs">
<li class="active">
<a class="text-muted" href="#Group" data-toggle="tab">tab1</a>
</li>
<li class="">
<a class="text-muted" href="#New" data-toggle="tab">tab2</a>
</li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="Group" style="padding-top: 20px; padding-right: 20px; padding-left: 20px;">
<div id="dashboard">
<div id="chart_div" style="width: 100%;"></div>
<div id="range_filter_div" style="width: 100%; padding-bottom: 20px;"></div>
</div>
</div>
<div class="tab-pane" id="New" style="padding-top: 20px; padding-right: 20px; padding-left: 20px;">
<div id="dashboard_a">
<script type="text/javascript">
$('#New').click(function (e) {
drawChart_a();
});
</script>
<div id="chart_div_a" style="width: 100%;"></div>
<div id="range_filter_div_a" style="width: 100%; padding-bottom: 20px;"></div>
</div>
</div>
</div>
</div>
答案 0 :(得分：2)
将您的事件处理程序移到绘图函数中，并重绘仪表板而不是再次调用绘图函数：
function drawChart () {
// ... chart code
function redraw () {
dash.draw(data);
}
$(window).resize(redraw);
$('#Group_link').click(redraw);
}
function drawChart_a () {
// ... chart code
function redraw () {
dash.draw(data);
}
$(window).resize(redraw);
$('#New_link').click(redraw);
}
您需要分配ID＆＃34; Group_link＆＃34;和＆＃34; New_link＆＃34; （或者你决定称呼它们）到你的标签链接，以便它们正确触发：
<li class="active">
<a class="text-muted" id="Group_link" href="#Group" data-toggle="tab">tab1</a>
</li>
<li class="">
<a class="text-muted" id="New_link" href="#New" data-toggle="tab">tab2</a>
</li>