Question

我有两页，一个显示所有图表的index.html页面，另一个显示图表和表格的页面。令人惊讶的是，来自index.html的所有图表都可以在IE11中看到，但是当我打开带有图表和表格的页面时，却找不到。

我应该在代码中进行哪些更改，以便IE可以识别图表？

这是我使用的由Google提供的代码，并进行了一些调整。

<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>

Answer 1

IE不喜欢addColumn语句中的多余逗号...

data.addColumn('string', 'Business Rule',);
data.addColumn('string', '%',);
data.addColumn('string', 'Total OK Values',);
data.addColumn('string', 'Total Values',);

不需要，将其删除...

data.addColumn('string', 'Business Rule');
data.addColumn('string', '%');
data.addColumn('string', 'Total OK Values');
data.addColumn('string', 'Total Values');

此外，每页只需加载一次Google图表，
每个图表一次。

您可以同时加载多个软件包。

google.charts.load('current', {packages:['corechart', 'table']});

请参阅以下工作片段...

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中使用）如何解决？

1 个答案: