[英]Copy google charts to another div doesn't work in IE
My HTML page using css materialize tabs. 我的HTML页面使用CSS实现选项卡。
I build all my google chart graphs in 'show' table divs, after it I 'hide' them and when the user click on tab I replace the html tab with the correct one from the 'hide' divs. 我将所有的Google图表图形都构建在“显示”表div中,然后对其进行“隐藏”,当用户单击选项卡时,将html选项卡替换为“隐藏” div中的正确选项卡。
In google chrome and firefox it works good, but in IE it doesn't work :( 在谷歌浏览器和Firefox中,它工作正常,但在IE中不起作用:(
<div id="row1">
<br />
<table align="center" style="background-color:white">
<tr valign="top">
...
</tr>
<tr valign="top">
...
</tr>
</table>
<br />
</div>
<div id="row2">
<br />
<table align="center" style="background-color:white;">
<tr valign="top">
...
</tr>
<tr valign="top">
...
</tr>
</table>
<br />
</div>
<div class="col s12" id="dashboardtabs">
<ul class="tabs" style="background-color:#80CBC4" id="tabs">
<li class="tab col s3"><a id="titletab1" class="white-text" href="#tab1" onclick="reloadForTabs('titletab1')" style="background-color:#009688">Subjects Status</a></li>
<li class="tab col s3"><a id="titletab2" href="#tab2" class="white-text" onclick="reloadForTabs('titletab2')" style="background-color:#80CBC4">Stratification</a></li>
</ul>
</div>
<div id="tab1" class="col s12"></div>
<div id="tab2" class="col s12"></div>
My js Code: 我的js代码:
at the first load change all the rows div to show - google charts need to build on show divs for support user settings (width, high and etc.): 首次加载时,将所有行div更改为显示-谷歌图表需要在show divs上构建以支持用户设置(宽度,高度等):
var emptyTabs = function()
{
titletabs.forEach(function (val) {
$('#tab' + val.slice(-1)).html('');
});
}
emptyTabs();
//Changed chart divs from hide to show
titletabs.forEach(function (val) {
$('#row' + val.slice(-1))[0].style.display = 'block';
});
After the user selected tab: 用户选择选项卡后:
//Changed chart divs from show to hide
titletabs.forEach(function (val) {
$('#row' + val.slice(-1))[0].style.display = 'none';
});
//Display the selected tab (After filters, in the first load and etc.)
var selectedtab = document.getElementsByClassName('white-text active')[0].id;
$('#tab' + selectedtab.slice(-1)).html($('#row' + selectedtab.slice(-1)).html());
In IE the graphs in the 'hide' divs (not in tabs) display correctly, but when the html div insert into the tab - the data is empty, The graph displays with all its properties but without data (bar chart - without the bars). 在IE中,“隐藏” div中的图形正确显示(不在选项卡中),但是当html div插入到选项卡中时-数据为空,图形将显示其所有属性,但没有数据(条形图-无条形) )。
like this: 像这样:
And not like this: 而且不是这样的:
Open https://jsfiddle.net/wjqwd467/ in google chrome and in IE and see the different... 在Google chrome和IE中打开https://jsfiddle.net/wjqwd467/ ,然后看到不同的...
Could someone help me? 有人可以帮我吗?
Thanks! 谢谢!
for starters, Object.values
isn't compatible with IE 对于初学者, Object.values
与IE不兼容
see --> Object.values()
- browser compatibility 参见-> Object.values()
-浏览器兼容性
try replacing with... 尝试替换为...
for (var i = 0; i < arraydata.length; i++) {
var daraarr = [];
for (var key in arraydata[i]) {
if (arraydata[i].hasOwnProperty(key)) {
daraarr.push(arraydata[i][key]);
}
}
daraarr.push("color:" + mycolor[arraydata[i].rownum]);
datatable.addRow(daraarr);
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.