谷歌图表-“;快速入门Hello World;不在IE8中渲染

Google charts - "Quick Start Hello World" not rendering in IE8

本文关键字：不在 Hello World IE8 谷歌      更新时间：2023-09-26

你好，我正在尝试运行谷歌图表快速入门，但它不会在IE8中呈现。

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

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

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

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");

这个人也有同样的问题：我如何让VML在标准模式下工作？

根据谷歌图表文档，InternetExplorer8及更早版本有时会出现问题，原因有两个：

  1. IE8不支持SVG，因此Charts会故障转移到VML，即更为有限
  2. 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]-->

我仔细检查了一下，下面的例子是在Windows7上的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>

相关文章：