我想在google折线图中将宽度更改为100%。容器已设置为100%宽度。 我的网页上有三张图表我的图表之一实际上显示了我设置为100%的完美宽度,但其余的图表没有显示指定的大小,即100%。 可能是什么问题呢?
当我使用谷歌浏览器检查它们时,我检查了它们和代码设置为400但第一个图形的宽度不同。
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load('visualization', '1', {packages: ['corechart']});
</script>
<script type="text/javascript">
var follower1 = parseInt(<?php echo json_encode($followersvalue2); ?>);
var follower2 = parseInt(<?php echo json_encode($followersvalue3); ?>);
var follower3 = parseInt(<?php echo json_encode($followersvalue4); ?>);
var follower4 = parseInt(<?php echo json_encode($followersvalue5); ?>);
var tweets1 = parseInt(<?php echo json_encode($tweetsvalue2); ?>);
var tweets2 = parseInt(<?php echo json_encode($tweetsvalue3); ?>);
var tweets3 = parseInt(<?php echo json_encode($tweetsvalue4); ?>);
var tweets4 = parseInt(<?php echo json_encode($tweetsvalue5); ?>);
var kscore1 = parseInt(<?php echo json_encode($kscorevalue2); ?>);
var kscore2 = parseInt(<?php echo json_encode($kscorevalue3); ?>);
var kscore3 = parseInt(<?php echo json_encode($kscorevalue4); ?>);
var kscore4 = parseInt(<?php echo json_encode($kscorevalue5); ?>);
var date1 = "<?php echo $previousDate2; ?>";
var date2 = "<?php echo $previousDate3; ?>";
var date3 = "<?php echo $previousDate4; ?>";
var date4 = "<?php echo $previousDate5; ?>";
function drawVisualization() {
var data = new google.visualization.DataTable();
data.addColumn('string', 'Date');
data.addColumn('number', 'Followers');
data.addRows([
[date4, follower4],
[date3, follower3],
[date2, follower2],
[date1, follower1]
]);
new google.visualization.LineChart(document.getElementById('visualization')).
draw(data, {curveType: "function",
width: 100+'%', height: 400,
vAxis: {maxValue: 10}}
);
}
/* Function for Tweets Graph
* To be displayed in Tweets Tab
* :)
*/
function drawVisualizationTweets(){
var data = new google.visualization.DataTable();
data.addColumn('string', 'Date');
data.addColumn('number', 'Tweets');
data.addRows([
[date4, tweets4],
[date3, tweets3],
[date2, tweets2],
[date1, tweets1]
]);
new google.visualization.LineChart(document.getElementById('visualization2')).
draw(data, {curveType: "function",
width: 100+'%', height: 400,
vAxis: {maxValue: 10}}
);
}
/* Function for Kloutscore Graph
* To be displayed in KloutScore Tab
* :)
*/
function drawVisualizationKscore(){
var data = new google.visualization.DataTable();
data.addColumn('string', 'Date');
data.addColumn('number', 'KloutScore');
data.addRows([
[date4, kscore4],
[date3, kscore3],
[date2, kscore2],
[date1, kscore1]
]);
new google.visualization.LineChart(document.getElementById('visualization3')).
draw(data, {curveType: "function",
width: 100+'%', height: 400,
vAxis: {maxValue: 10}}
);
}
google.setOnLoadCallback(drawVisualization);
google.setOnLoadCallback(drawVisualizationTweets);
google.setOnLoadCallback(drawVisualizationKscore);
</script>
在我有
<div id="tab-1" aria-labelledby="ui-id-2" class="ui-tabs-panel ui-widget-content ui-corner-bottom" role="tabpanel" aria-expanded="true" aria-hidden="false" style="display: block;">
<div id="visualization" style="width: 100%; height: 400px;"></div>
</div>
<div id="tab-2" aria-labelledby="ui-id-3" class="ui-tabs-panel ui-widget-content ui-corner-bottom" role="tabpanel" aria-expanded="false" aria-hidden="true" style="display: none;">
<div id="visualization2" style="width: 100%; height: 400px;"></div>
</div>
<div id="tab-3" aria-labelledby="ui-id-4" class="ui-tabs-panel ui-widget-content ui-corner-bottom" role="tabpanel" aria-expanded="false" aria-hidden="true" style="display: none;">
<div id="visualization3" style="width: 100%; height: 400px;"></div>
</div>
</body>
需要帮助。 谢谢
答案 0 :(得分:1)
从你的div的id中,我猜你正在使用某种基于标签的UI,对吧?如果是这样,那就是问题的根源。当您尝试绘制图表时,页面上的第二个和第三个选项卡div将被隐藏,这会影响API获取第二个和第三个图表的容器div维度的能力。要解决此问题,您可以执行以下两项操作之一:在实例化选项卡界面之前绘制图表,或者在选项卡上设置事件处理程序,以便在首次打开容器选项卡时绘制每个图表。