Google图表无法在IE11中使用，（但可以在chrome中使用）如何解决？ [英] Google charts aren't working in IE11, (but works in chrome) how to fix it?
问题描述
我有两页，一个显示所有图表的index.html页面，另一个显示图表和表格的页面。令人惊讶的是，index.html中的所有图表都可以在IE11中看到，但是当我打开带有图表和表格的页面时却找不到。
I have two pages, one index.html page that shows all charts and one page that shows a chart and table. Surprisingly, all charts from index.html can be seen in IE11 but when I open a page with a chart and table it won't.
我应该在代码，因此IE可以识别图表？
What should I change in the code, thus the IE could recognize charts?
这是我使用的由Google提供的代码，并进行了一些调整。
Here is the code I was using provided by google and made some adjustments.
<html>
<head>
<link href="stylesheet.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="loader.js"></script>
<script type="text/javascript">
google.charts.load("current", {packages:["corechart"]});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Metric', 'Score'],
['Uniqueness', 45.3],
['', 54.7]
]);
var view = new google.visualization.DataView(data);
view.setColumns([0, 1]);
var options = {
legend: 'none',
title: 'Unique Identifiability',
pieHole: 0.6,
colors: ['#ff0000', '#808080']
};
var chart = new google.visualization.PieChart(document.getElementById('uniqueness'));
google.visualization.events.addListener(chart, 'select', function () {
var selection = chart.getSelection();
});
chart.draw(view, options);
}
google.charts.load('current', {'packages':['table']});
google.charts.setOnLoadCallback(drawTable);
function drawTable() {
var data = new google.visualization.DataTable();
data.addColumn('string', 'Business Rule',);
data.addColumn('string', '%',);
data.addColumn('string', 'Total OK Values',);
data.addColumn('string', 'Total Values',);
data.addRows([
['Birth date must be filled', '58%','75365','129940'],
['Country must be filled', '98%','294028','300029'],
]);
var table = new google.visualization.Table(document.getElementById('table_div'));
table.draw(data, {showRowNumber: false, width: '100%', height: '100%'});
}
</script>
</head>
<body>
<table class="columns">
<tr>
<td>
<div><a href="index.html" class="next">BACK BUTTON</a></div>
<div id="uniqueness" style="width: 1200px; height: 700px;"></div>
<div id="table_div"></div>
</td>
</tr>
</table>
</body>
</html>
推荐答案
IE不喜欢 addColumn 语句...
IE doesn't like the extra commas in the addColumn statements...
data.addColumn('string', 'Business Rule',);
data.addColumn('string', '%',);
data.addColumn('string', 'Total OK Values',);
data.addColumn('string', 'Total Values',);
不需要，将其删除...
not needed, remove them...
data.addColumn('string', 'Business Rule');
data.addColumn('string', '%');
data.addColumn('string', 'Total OK Values');
data.addColumn('string', 'Total Values');
此外，Google图表只需加载一次每页，
每张图表不会一次。
also, google charts only needs to be loaded once per page,
not once per chart.
您可以同时加载多个软件包。
you can load multiple packages at the same time.
google.charts.load('current', {packages:['corechart', 'table']});
请参阅以下工作摘要...
see following working snippet...
google.charts.load('current', {packages:['corechart', 'table']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Metric', 'Score'],
['Uniqueness', 45.3],
['', 54.7]
]);
var view = new google.visualization.DataView(data);
view.setColumns([0, 1]);
var options = {
legend: 'none',
title: 'Unique Identifiability',
pieHole: 0.6,
colors: ['#ff0000', '#808080']
};
var chart = new google.visualization.PieChart(document.getElementById('uniqueness'));
google.visualization.events.addListener(chart, 'select', function () {
var selection = chart.getSelection();
});
chart.draw(view, options);
var data = new google.visualization.DataTable();
data.addColumn('string', 'Business Rule');
data.addColumn('string', '%');
data.addColumn('string', 'Total OK Values');
data.addColumn('string', 'Total Values');
data.addRows([
['Birth date must be filled', '58%','75365','129940'],
['Country must be filled', '98%','294028','300029'],
]);
var table = new google.visualization.Table(document.getElementById('table_div'));
table.draw(data, {showRowNumber: false, width: '100%', height: '100%'});
}
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="uniqueness" style="width: 1200px; height: 700px;"></div>
<div id="table_div"></div>
这篇关于Google图表无法在IE11中使用，（但可以在chrome中使用）如何解决？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
