Google IE <= 8 中不显示饼图

Question

我需要为不同的IE版本执行这个.php文件，但是当我模拟时出现以下错误：

IE 8:"gvjs_VL" 未定义。
IE <8: "JSON" 未定义。

我也尝试过在 IE 版本 <= 8 时使用 json2，但没有解决问题。可能发生了什么？

提前谢谢你。 :)

<!DOCTYPE html>
<?php 
$chartData = array(array("Area" , "Number of people"),
                   array("A"    , 5000),
                   array("B"    , 8000),
                   array("C"    , 400),
                   array("D"    , 40000),
                   array("E"    , 1000),
                   array("F"    , 1400 ));  
?>

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge" >
    <link rel="stylesheet" href="main.css">
</head>
<body>

<div class="chartContainer">
    <div id="piechart" class="piechart">
        <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>

        <script type="text/javascript">
        // Load google charts
        google.charts.load('current', {'packages':['corechart']});
        google.charts.setOnLoadCallback(drawChart);

        // Draw the chart and set the chart values
        function drawChart() {
          var data = google.visualization.arrayToDataTable( <?php echo json_encode($chartData, JSON_NUMERIC_CHECK); ?>);

          // Optional; add a title and set the width and height of the chart
          var options = {fontName:'Arial', legend:{position: 'labeled', maxLines:15, alignment:'start'}, 
                         textStyle: {color: 'black', fontSize: 30}, 
                         pieHole: 0.4, sliceVisibilityThreshold:0.0,
                         chartArea: {   
                                     width: "100%",
                                     top: "0%",
                                     left: "0%"},

                         };

          // Display the chart inside the div> element with id="piechart"
          var chart = new google.visualization.PieChart(document.getElementById('piechart'));
          chart.draw(data, options);
        }
    </script>
    </div>

</div>
</body>

Answer 1

我无法运行你的 PHP 代码，所以我尝试用 JS 测试 Google 图表示例。

<!DOCTYPE html>
<html lang="en-US">
<body>

<h1>My Web Page</h1>

<div id="piechart"></div>

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>

<script type="text/javascript">
// Load google charts
google.charts.load('current', {'packages':['corechart']});
google.charts.setOnLoadCallback(drawChart);

// Draw the chart and set the chart values
function drawChart() {
  var data = google.visualization.arrayToDataTable([
  ['Task', 'Hours per Day'],
  ['Work', 8],
  ['Eat', 2],
  ['TV', 4],
  ['Gym', 2],
  ['Sleep', 8]
]);

  // Optional; add a title and set the width and height of the chart
  var options = {'title':'My Average Day', 'width':550, 'height':400};

  // Display the chart inside the <div> element with id="piechart"
  var chart = new google.visualization.PieChart(document.getElementById('piechart'));
  chart.draw(data, options);
}
</script>

</body>
</html>

在IE浏览器中输出：

如果您查看源代码，您会注意到 Google 图表在其图表中使用 SVG。 IE <= 8 不支持 SVG。

参考：

SVG (basic support)

这可能是它在 IE <=8 版本中不工作的原因之一。

目前不支持IE 8及更早版本。建议升级到IE 11浏览器。它可以帮助避免这个问题。

Google IE <= 8 中不显示饼图

Google Pie chart not displaying in IE <= 8

php

internet-explorer

web-applications

emulation

google-visualization