2013-10-02 99 views
1

我有一個與JQPlot Basic Chart not displaying報告類似的問題,儘管查看了它的建議並檢查了示例的源代碼,但我無法使其工作。我複製了大部分示例代碼(http://www.jqplot.com/tests/bar-charts.php中的第一個示例),然後包含源代碼中的JavaScript鏈接(查看源代碼:http://www.jqplot.com/tests/bar-charts.php),但不顯示任何內容。請參閱下面的代碼。我究竟做錯了什麼?JQplot條形圖示例不顯示

<html> 
<head> 
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
    <title> jqplottest </title> 
    <!--[if lt IE 9]><script language="javascript" type="text/javascript" src="excanvas.js"></script><![endif]--> 
    <script language="javascript" type="text/javascript" src="http://www.jqplot.com/src/jquery.min.js"></script> 
    <script language="javascript" type="text/javascript" src="http://www.jqplot.com/src/jquery.jqplot.min.js"></script> 
    <link rel="stylesheet" type="text/css" href="http://www.jqplot.com/src/jquery.jqplot.min.css" /> 

    <script language="javascript" type="text/javascript" src="http://www.jqplot.com/src/plugins/jqplot.barRenderer.min.js"></script> 
    <script language="javascript" type="text/javascript" src="http://www.jqplot.com/src/plugins/jqplot.categoryAxisRenderer.min.js"></script> 
    <script language="javascript" type="text/javascript" src="http://www.jqplot.com/src/plugins/jqplot.pointLabels.min.js"></script> 

    <script type="text/javascript"> 
    /* following script code -$(document).ready(function()- is exact copy of original example code*/  
    $(document).ready(function(){ 
     var s1 = [200, 600, 700, 1000]; 
     var s2 = [460, -210, 690, 820]; 
     var s3 = [-260, -440, 320, 200]; 
     // Can specify a custom tick Array. 
     // Ticks should match up one for each y value (category) in the series. 
     var ticks = ['May', 'June', 'July', 'August']; 

     var plot1 = $.jqplot('chart1', [s1, s2, s3], { 
     // The "seriesDefaults" option is an options object that will 
     // be applied to all series in the chart. 
      seriesDefaults:{ 
       renderer:$.jqplot.BarRenderer, 
      rendererOptions: {fillToZero: true} 
      }, 
     // Custom labels for the series are specified with the "label" 
     // option on the series option. Here a series option object 
     // is specified for each series. 
     series:[ 
      {label:'Hotel'}, 
      {label:'Event Regristration'}, 
      {label:'Airfare'} 
      ], 
     // Show the legend and put it outside the grid, but inside the 
     // plot container, shrinking the grid to accomodate the legend. 
     // A value of "outside" would not shrink the grid and allow 
     // the legend to overflow the container. 
     legend: { 
      show: true, 
      placement: 'outsideGrid' 
     }, 
     axes: { 
      // Use a category axis on the x axis and use our custom ticks. 
      xaxis: { 
       renderer: $.jqplot.CategoryAxisRenderer, 
       ticks: ticks 
      }, 
      // Pad the y axis just a little so bars can get close to, but 
      // not touch, the grid boundaries. 1.2 is the default padding. 
      yaxis: { 
      pad: 1.05, 
      tickOptions: {formatString: '$%d'} 
      } 
     } 
    }); 
}); 

</head> 
<body> 

    <div id="chart1" style="width:600px; height:250px;"></div> 
</body> 
</html> 
+0

您正在使用哪種瀏覽器?你有沒有嘗試不同的瀏覽器? P.S你的代碼在我的電腦上工作正常 –

回答

0

從已公佈你缺少結束標籤之前結束標記確切的代碼。也許這就是問題所在。

+0

我發現問題;當訪問鏈接到http://www.jqplot.com/src/的腳本文件時,控制檯顯示「Forbidden」。所以我下載了所有的文件,而它的工作原理... – Joppo