0

我正在尝试使用 jqPlot 条形图显示条形图。我正在编写在 Internet Explorer 中显示图表的代码。但是对于相同的代码图表不会显示在 Crome 和 Mozilla 浏览器中。我已经给出了下面的代码 -

<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ page session="false" %>
<html>
<head>
<style>
<title>Home</title>
<script src="http://code.jquery.com/jquery-1.8.3.js"></script>
<script src="https://github.com/douglascrockford/JSON-js/blob/master/json2.js">           </script>
<script type="text/javascript" src="../resources/jQuery/jquery.min.js"></script>
<script type="text/javascript" src="../resources/jQuery/jquery.jqplot.min.js"></script>
<script type="text/javascript" src="../resources/jQuery/plugins/jqplot.barRenderer.min.js"></script>
<script type="text/javascript" src="../resources/jQuery/plugins/jqplot.pieRenderer.min.js"></script>
<script type="text/javascript" src="../resources/jQuery/plugins/jqplot.categoryAxisRenderer.min.js"></script>
<script type="text/javascript" src="../resources/jQuery/plugins/jqplot.pointLabels.min.js">   </script>
<link rel="stylesheet" type="text/css" href="../resources/jQuery/jquery.jqplot.min.css" />

<script>
function drawChart() {
alert("In draw chart");
  var s1 = [2, 6, 7];
  var s2 = [7, 5, 3];
  var s3 = [2, 3, 5];
  var s4 = [1, 7, 2];

  // chart data
  var dataArray = [s1, s2, s3, s4];

  // x-axis ticks
  var ticks = ['Jan', 'Feb', 'Mar'];

  // chart rendering options
  var options = {
    seriesDefaults: {
      renderer:$.jqplot.BarRenderer
    },
    axes: {
      xaxis: {
        renderer: $.jqplot.CategoryAxisRenderer,
        ticks: ticks
      }
    }
  };

  // draw the chart
  $.jqplot('showData', dataArray, options);
}// end
</script>
</head>
<body>

<button value="Get Employee Data" onclick="drawChart()">Get Chart</button>
<div id="showData" style="height: 400px; width: 400px;"></div>


</body>
</html>

为什么此代码不适用于 Crome 和 Mozilla 浏览器？

4

1 回答 1

1

我能够通过以下方式获得在 IE9、FF 和 Chrome 中显示的图表：

  1. 移除 <style>标签。此标记阻止在所有浏览器中显示任何内容。
  2. <!DOCTYPE html>在文件顶部添加。这防止了 IE9 中的错误。

此外，您链接的方式json2.js实际上是检索显示文件的 Github 页面，而不是实际文件本身。

于 2013-01-09T05:06:23.910 回答