Question

您好我正在尝试运行Google Chart快速入门，但它无法在IE8中呈现。

我可以看到谷歌图表确实创建了一些IE时髦的标记，但没有显示任何内容。

指南位于https://developers.google.com/chart/interactive/docs/quick_start

是否需要一些额外的配置才能让它在IE8中运行？

Answer 1

根据Google Charts文档，Internet Explorer 8及更早版本有时会出现问题，原因有两个：

IE8不支持SVG，因此Charts故障转移到VML，即更有限。
IE8的JavaScript不允许使用尾随逗号列表。

为了使其工作，您需要添加vml命名空间并添加特定的CSS行为

<!--[if lte IE 8 ]>
<script type="text/javascript">
    document.namespaces.add('vml', 'urn:schemas-microsoft-com:vml');
    document.createStyleSheet().cssText =
    'vml\\:fill, vml\\:path, vml\\:shape, vml\\:stroke' +
    '{ behavior:url(#default#VML); display: inline-block; } ';
</script>
<![endif]-->

我已经仔细检查过，下面的示例在Windows 7上的IE8中工作。但是，它最初显示警告“为了帮助保护您的安全，Internet Explorer已限制此网页运行可以访问您的脚本或ActiveX控件电脑。”只有在允许被阻止的内容后才会呈现饼图。

<html>

<head>
  <!--Load the AJAX API-->
  <!--[if lte IE 8 ]>
	<script type="text/javascript">
		document.namespaces.add('vml', 'urn:schemas-microsoft-com:vml');
		document.createStyleSheet().cssText =
		'vml\\:fill, vml\\:path, vml\\:shape, vml\\:stroke' +
		'{ behavior:url(#default#VML); display: inline-block; } ';
	</script>
	<![endif]-->
  <script type="text/javascript" src="https://www.google.com/jsapi"></script>
  <script type="text/javascript">
    // Load the Visualization API and the piechart package.
    google.load('visualization', '1.0', {
      'packages': ['corechart']
    });

     // Set a callback to run when the Google Visualization API is loaded.
    google.setOnLoadCallback(drawChart);

     // Callback that creates and populates a data table,
     // instantiates the pie chart, passes in the data and
     // draws it.
    function drawChart() {

      // Create the data table.
      var data = new google.visualization.DataTable();
      data.addColumn('string', 'Topping');
      data.addColumn('number', 'Slices');
      data.addRows([
        ['Mushrooms', 3],
        ['Onions', 1],
        ['Olives', 1],
        ['Zucchini', 1],
        ['Pepperoni', 2]
      ]);

      // Set chart options
      var options = {
        'title': 'How Much Pizza I Ate Last Night',
        'width': 400,
        'height': 300
      };

      // Instantiate and draw our chart, passing in some options.
      var chart = new google.visualization.PieChart(document.getElementById('chart_div'));
      chart.draw(data, options);
    }
  </script>
</head>

<body>
  <!--Div that will hold the pie chart-->
  <div id="chart_div"></div>
</body>

</html>

Answer 2

IE8将退回使用VML;来自他们的画廊（https://developers.google.com/chart/interactive/docs/gallery）：

这些图表基于纯HTML5 / SVG技术（采用旧版IE的VML）

经过一番挖掘，看起来VML不会只是工作，所以试着把它放在js的开头（或者更好的是，作为你顶部的内联脚本） HTML）：

document.namespaces.add('v', 'urn:schemas-microsoft-com:vml', "#default#VML");

此人有同样的问题：How do I get VML working in standards mode?

Google图表 - “快速启动Hello World”无法在IE8中呈现

2 个答案: