2012-12-04 20 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> 

यह कुछ सी # कोड के माध्यम से उत्पन्न होता है, लेकिन अंत में पृष्ठ स्रोत प्रस्तुत कोड की तरह दिखता है। चार्ट तैयार नहीं किया गया है और jquery इस अपवाद को फेंकता है: No plot target specified

कि के लिए कोई सुराग?

उत्तर

14

यह सुनिश्चित करें कि अपने HTML chart1 की एक आईडी के साथ एक तत्व (आमतौर पर एक div) भी शामिल है रहो।

jqPlot स्रोत कोड इस प्रकार है:

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

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

    .... 

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

    .... 
} 

ऐसा लगता है कि कोड है कि विशेष रूप त्रुटि तब होती है में एकमात्र ऐसा स्थान है। ध्यान दें कि # चरित्र target के लिए prepended है, इसलिए क्यों लक्ष्य एक वैध पहचान पत्र की जरूरत है।

1

अपने कोड के साथ पूरी तरह कार्यात्मक HTML पृष्ठ। बस अपने स्थानीय jqPlot स्थापना फ़ोल्डर को इंगित करने के लिए "../../libs/jQuery.jqPlot.1.0.9/" को प्रतिस्थापित करें।

आवश्यक 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> 
संबंधित मुद्दे