2011-10-20 5 views
5

मुझे लगता है कि मेरे jqplot बार ग्राफ को ढेर करने के लिए प्रतीत नहीं होता है। मेरे पास निम्न कोड है:xaxis टेक्स्ट होने पर मैं jqplot स्टैक्ड बार ग्राफ़ कैसे प्रदर्शित कर सकता हूं?

// Pass/Fail rates per request 
$.jqplot('passFailPerRequestStats', [passRate, failRate], { 
    title: 'Automation Pass Count Per Test Plan', 
    //stackSeries: true, 
    seriesDefaults: { 
     renderer: $.jqplot.BarRenderer, 
     renderOptions: { barMargin: 25 }, 
     pointLabels: { show: true, stackedValue: true } 
    }, 
    axesDefaults: { 
     tickRenderer: $.jqplot.CanvasAxisTickRenderer, 
     tickOptions: { 
      angle: -30, 
      fontSize: '10pt' 
     } 
    }, 
    axes: { 
     xaxis: { 
      renderer: $.jqplot.CategoryAxisRenderer 
     } 
    } 
}); 

यह दोनों श्रृंखलाओं के लिए साइड बार ग्राफ द्वारा सफलतापूर्वक एक पक्ष प्रदर्शित कर रहा है। हालांकि, जब मैं stackSeries: true, को अपूर्ण करके उन्हें ढेर करने का प्रयास करता हूं तो सभी बार ग्राफ ग्राफ़ से हटाए जाते हैं (और सभी बिंदु लेबल वाई अक्ष लेबल पर प्रदर्शित होते हैं)।

मैं क्या गलत कर रहा हूं?

उत्तर

8

आपको अपने rendererOptions ऑब्जेक्ट में बारडिरेक्शन शामिल करने की आवश्यकता है।

rendererOptions: { 
       barDirection: 'vertical', 
       highlightMouseDown: true  
      } 

अंतिम ब्रैकेट के बाद कॉमा को शामिल करना सुनिश्चित करें, यदि अधिक विकल्प इसका पालन करते हैं। ढेर के लिए xaxis को भी निर्दिष्ट करने की आवश्यकता है।

आपकी डेटा संरचना इस तरह दिखनी चाहिए। एक्स अक्ष को इंगित करने वाले प्रत्येक आइटम में अग्रणी संख्या के साथ।

var s1 = [[1,1],[2,2],[3,3],[4,4],[5,5],[6,6],[7,7],[8,8],[9,9],[10,10],[11,11],[12,12]]; 
    var s2 = [[1,12],[2,11],[3,10],[4,9],[5,8],[6,7],[7,6],[8,5],[9,4],[10,3],[11,2],[12,1]]; 
    var s3 = [[1,1],[2,2],[3,3],[4,4],[5,5],[6,6],[7,7],[8,8],[9,9],[10,10],[11,11],[12,12]]; 
    var months = ['Jan', 'Feb', 'Mar', 'Apr',"May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"]; 
    plot4 = $.jqplot('chartdiv', [ 
    s1, 
    s2, 
    s3 
    ], 

टिक्स में महीनों (या जो भी पाठ आप चाहते हैं) का उपयोग करें: ऐसा विकल्प।

xaxis: { 
       renderer: $.jqplot.CategoryAxisRenderer, 
       ticks: months 
      } 
+0

दोनों बार दिशा में किसी से मदद की

<script src="/.../jquery.jqplot.min.js" type="text/javascript"></script> <script src="/.../jqplot.barRenderer.min.js" type="text/javascript"></script> <script src="/.../jqplot.canvasTextRenderer.min.js" type="text/javascript"></script> <script src="/.../jqplot.dateAxisRenderer.min.js" type="text/javascript"></script> <script src="/.../jqplot.canvasAxisTickRenderer.min.js" type="text/javascript"></script> <script src="/.../jqplot.categoryAxisRenderer.min.js" type="text/javascript"></script> <script src="/.../jqplot.canvasAxisLabelRenderer.min.js" type="text/javascript"></script> 

आशा इस और पुन: फ़ॉर्मेट एक्स-अक्ष के लिए एक संख्यात्मक मान का उपयोग करके मूल्य (एक विशेष टिक मूल्य के साथ) इसे ठीक कर दिया! आपका बहुत बहुत धन्यवाद! – KallDrexx

+0

क्या आप निर्दिष्ट कर सकते हैं कि आपने किस विशेष टिक का उपयोग किया है क्योंकि मुझे एक ही समस्या का सामना करना पड़ रहा है और बार दिशा निर्दिष्ट करना मदद नहीं कर रहा है ... –

1

मैं इस समाधान द्वारा जोड़ा जा रहा के रूप में मैं पहले (, हालांकि यह मुझे सही रास्ते पर डाल दिया था इसलिए धन्यवाद @Jack) एक मेरी वातावरण में काम नहीं करने के लिए तैनात पाया - एक एएसपी पर मेरे लिए काम किया निम्नलिखित JQuery 1.9.1 और JQuery UI 1.1O.3:

प्रस्तुत करने के लिए rendererOptions{...} को अनावश्यक रूप से प्रस्तुत करने के लिए .NET MVC3 साइट jqPlot 1.0.8r1250 चला रही है।

मैंने यह भी पाया कि stackedValue: trueseriesDefaults > pointLabels नोड के तहत कोई प्रभाव नहीं पड़ा, इसके बजाय मुझे रूट नोड के तहत stackSeries: true को अपूर्ण करना पड़ा।

मेरे अंतिम कोड:

var s1 = [[1, 1], [2, 2], [3, 3], [4, 4], [5, 5], [6, 6], [7, 7], [8, 8], [9, 9], [10, 10], [11, 11], [12, 12]]; 
var s2 = [[1, 12], [2, 11], [3, 10], [4, 9], [5, 8], [6, 7], [7, 6], [8, 5], [9, 4], [10, 3], [11, 2], [12, 1]]; 
var s3 = [[1, 1], [2, 2], [3, 3], [4, 4], [5, 5], [6, 6], [7, 7], [8, 8], [9, 9], [10, 10], [11, 11], [12, 12]]; 

var months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']; 

$.jqplot('chartdiv', [s1, s2, s3], { 
    title: 'Automation Pass Count Per Test Plan', 
    stackSeries: true, 
    seriesDefaults: { 
     renderer: $.jqplot.BarRenderer, 
     renderOptions: { barMargin: 25 } 
    }, 
    axesDefaults: { 
     tickRenderer: $.jqplot.CanvasAxisTickRenderer, 
     tickOptions: { 
      angle: -30, 
      fontSize: '10pt' 
     } 
    }, 
    axes: { 
     xaxis: { 
      renderer: $.jqplot.CategoryAxisRenderer, 
      ticks: months 
     } 
    } 
}); 

यह भी सुनिश्चित करें आप निम्नलिखित लिंक शामिल करें: भविष्य

संबंधित मुद्दे