Google图表无法在IE11中使用，（但可以在chrome中使用）如何解决？

编程入门行业动态更新时间:2024-10-24 17:25:13

本文介绍了Google图表无法在IE11中使用，（但可以在chrome中使用）如何解决？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！问题描述

我有两页，一个显示所有图表的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%'}); }