2012-12-04 77 views
9

我想提請jqplot用下面的代碼:JQPlot - 沒有情節目標指定

<script lang="javascript" type="text/javascript"> 
    $(document).ready(function() { 



     var line1 = var line1 =[["10.01.2011",3.9990],["11.01.2011",3.9910],["12.01.2011",4.0140],["13.01.2011",3.9940],["14.01.2011",3.9050],["17.01.2011",3.9340],["18.01.2011",3.9520],["19.01.2011",3.8980],["20.01.2011",3.8690],["21.01.2011",3.8830],["24.01.2011",3.8550],["25.01.2011",3.8480],["26.01.2011",3.8190],["27.01.2011",3.8440],["28.01.2011",3.8260],["31.01.2011",3.8060],["01.02.2011",3.7970],["02.02.2011",3.8060],["03.02.2011",3.8110],["04.02.2011",3.8640],["07.02.2011",3.8750],["08.02.2011",3.8640],["09.02.2011",3.8480],["11.02.2011",3.8570],["14.02.2011",3.8880],["15.02.2011",3.88],["16.02.2011",3.8520],["17.02.2011",3.8590],["18.02.2011",3.8690],["22.02.2011",3.8440],["23.02.2011",3.8080],["24.02.2011",3.7410],["25.02.2011",3.7460],["28.02.2011",3.7550],["01.03.2011",3.7520],["02.03.2011",3.76],["03.03.2011",3.7420],["04.03.2011",3.7430],["07.03.2011",3.7330],["08.03.2011",3.7260],["09.03.2011",3.76],["10.03.2011",3.7910],["11.03.2011",3.79]]; 

     var plot1 = $.jqplot('chart1', [line1], { 
      title: 'Default Date Axis', 
      axes: { xaxis: { renderer: $.jqplot.DateAxisRenderer } }, 
      series: [{ lineWidth: 4, markerOptions: { style: 'square' } }] 
     }); 
    }); 
</script> 

它是通過一些C#代碼生成的,但在最後的頁面源代碼看起來像呈現代碼。 圖表未繪製,jquery引發此異常:No plot target specified

有什麼線索嗎?

回答

14

確保您的HTML包含一個ID爲chart1的元素(通常是div)。

的jqplot源代碼是這樣的:

this.init = function(target, data, options) { 

    this.target = $('#'+target); 

    .... 

    if (!this.target.get(0)) { 
     throw "No plot target specified"; 
    } 

    .... 
} 

似乎是在發生特定錯誤代碼中的唯一位置。請注意,#字符被預置爲target,因此目標需要成爲有效的ID。

1

功能齊全的HTML頁面包含您的代碼。只需將「../../libs/jQuery.jqPlot.1.0.9/」替換爲您的本地jqPlot安裝文件夾即可。

備註包含所需的jqplot.dateAxisRenderer.js插件!我花了一段時間才知道圖表沒有被渲染:)

<!doctype html> 
<html> 
<head> 
    <title>iqPlot Sample</title> 
    <link rel="stylesheet" type="text/css" href="../../libs/jQuery.jqPlot.1.0.9/jquery.jqplot.min.css" /> 

    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
    <!--[if lt IE 9]><script src="../../libs/jQuery.jqPlot.1.0.9/excanvas.js"></script><![endif]--> 
    <script src="../../libs/jQuery.jqPlot.1.0.9/jquery.jqplot.min.js"></script> 
    <script src="../../libs/jQuery.jqPlot.1.0.9/plugins/jqplot.dateAxisRenderer.js"></script> 

<script> 
$(document).ready(function() { 
    var line1 = [["10.01.2011",3.9990],["11.01.2011",3.9910],["12.01.2011",4.0140],["13.01.2011",3.9940],["14.01.2011",3.9050],["17.01.2011",3.9340],["18.01.2011",3.9520],["19.01.2011",3.8980],["20.01.2011",3.8690],["21.01.2011",3.8830],["24.01.2011",3.8550],["25.01.2011",3.8480],["26.01.2011",3.8190],["27.01.2011",3.8440],["28.01.2011",3.8260],["31.01.2011",3.8060],["01.02.2011",3.7970],["02.02.2011",3.8060],["03.02.2011",3.8110],["04.02.2011",3.8640],["07.02.2011",3.8750],["08.02.2011",3.8640],["09.02.2011",3.8480],["11.02.2011",3.8570],["14.02.2011",3.8880],["15.02.2011",3.88],["16.02.2011",3.8520],["17.02.2011",3.8590],["18.02.2011",3.8690],["22.02.2011",3.8440],["23.02.2011",3.8080],["24.02.2011",3.7410],["25.02.2011",3.7460],["28.02.2011",3.7550],["01.03.2011",3.7520],["02.03.2011",3.76],["03.03.2011",3.7420],["04.03.2011",3.7430],["07.03.2011",3.7330],["08.03.2011",3.7260],["09.03.2011",3.76],["10.03.2011",3.7910],["11.03.2011",3.79]]; 
    var plot1 = $.jqplot('chart1', [line1], { 
     title: 'Default Date Axis', 
     axes: { xaxis: { renderer: $.jqplot.DateAxisRenderer } }, 
     series: [{ lineWidth: 4, markerOptions: { style: 'square' } }] 
    }); 
}); 
</script> 
</head> 
<body> 
<div id="chart1"></div> 
</body> 
</html>