Question

我正在尝试使用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浏览器？

Answer 1

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

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

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

jqPlot条形图未显示在Chrome和Mozilla中

1 个答案: