svg>并且<rect>谷歌折线图中的内联样式错误
svg> and <rect> inline style bug in google line charts
我想在谷歌折线图中将宽度更改为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>
需要帮助。感谢
从div的id来看,我猜您使用的是某种基于选项卡的UI,对吧?如果是这样,那就是问题的根源。当您试图绘制图表时,页面上的第二个和第三个选项卡div将被隐藏,这会打乱API获取第二个图和第三张图的容器div的维度的能力。要解决此问题,您可以做以下两件事之一:在实例化选项卡界面之前绘制图表,或者在选项卡上设置事件处理程序,在首次打开容器选项卡时绘制每个图表。
相关文章:
- 内联javascript与"<脚本>"字符串错误地关闭了脚本标记
- "未捕获类型错误/丢弃意外“;因为一句台词而出现?(HTML w/<脚本>)
- jquery 1.8.0语法错误,无法识别的表达式:>
- HTML上的Webpack JSX错误<来源>标签
- 3ds max>collada>threejs动画错误;缩放超出界限”;
- 未捕获的类型错误:对象#<节点列表>没有方法'addEventListener'
- 无法修改Controls集合,因为控件包含代码块(即<%.%>).无法更正此错误
- 未捕获的类型错误:对象#<对象>没有方法'绑定'-脊梁骨
- 未捕获的类型错误:对象#<HTMLDivElement>没有方法'偏移'
- 未捕获的语法错误:意外的标记<在<!DOCTYPE html>
- 中心未定义-<!DOCTYPE html>错误
- 未捕获的类型错误:对象#<HTML对象元素>没有方法'重新绘制工作流'
- npm->错误:找不到模块'可读流'
- 未捕获的类型错误:对象#<对象>没有方法'substr'带标签的标记
- <嵌入>或者<对象>标签视频播放错误处理程序-JavaScript
- 扩展程序读取错误的数据 + gt>不起作用
- 未捕获的类型错误:对象#<HTML文档>没有方法'alert'
- Angular js:->访问解析属性时,angular引发未知提供程序错误
- svg>并且<rect>谷歌折线图中的内联样式错误
- JQuery表分类器未捕获类型错误:对象#<HTML文档>没有方法'准备就绪'