Primefaces चार्ट + jqPlot एक्सटेंडर - jqPlot विकल्पों के साथ बढ़ाया y- अक्ष

Question

पृष्ठभूमि

मैं एक primefaces लाइन चार्ट है (एक्स पर तारीख, पूर्णांक> = y पर 0) में गोल मूल्य:

function extender() { 
     this.cfg.axes = { 
      xaxis : { 
       renderer : $.jqplot.DateAxisRenderer, 
       rendererOptions : { 
        tickRenderer:$.jqplot.CanvasAxisTickRenderer 
       }, 
       tickOptions : { 
        fontSize:'10pt', 
        fontFamily:'Tahoma', 
        angle:-40,      
        formatString:'%b-%y' 
       }, 
       tickInterval:'2592000000' 
      }, 
      yaxis : { 
       min: 0, 
       rendererOptions : { 
        tickRenderer:$.jqplot.CanvasAxisTickRenderer, 
       }, 
       tickOptions: { 
        fontSize:'10pt', 
        fontFamily:'Tahoma', 
        angle:0, 
        formatString: '%d' 
       } 
      }, 
     }; 
     this.cfg.axes.xaxis.ticks = this.cfg.categories; 
    } 

मैं jqPlot एक्सटेंडर उपयोग कर रहा हूँ x- अक्ष पर कस्टम दिनांक अंतराल के लिए और इस ठीक काम कर रहा है:

समस्या

जब मैं y- अक्ष में विकल्प min: 0 का उपयोग संख्या के स्वरूपण वास्तव में अजीब हो जाता है, खासकर जब छोटे मान हैं:

ध्यान दें कि primefaces में minY विशेषता काम नहीं करता है (संभवतः क्योंकि विस्तारक इसे ओवरराइट करता है)

इसे ठीक करने के लिए, मैं formatString: %d का उपयोग करता हूं। यह काम करता है, लेकिन यह टिक की संख्या के साथ समस्या पैदा करता है: कई बार

आप स्क्रीनशॉट पर देख के रूप में, देखते हैं मान 1

प्रश्न

के लिए लाइन यह सुनिश्चित कैसे कर सकता है कि मुझे वाई-अक्ष पर समान मूल्य नहीं मिलता है?

मेरे पास वास्तव में टिक की स्थिर संख्या नहीं हो सकती है क्योंकि जब डेटा बड़ा हो जाता है (चलो लगभग 100 कहें), मुझे वाई-अक्ष (जैसे 20, 40, आदि ...)

पर कई मान चाहिए

Answer 1

मैंने मेहसी के पद से विचारों का उपयोग करके अपनी समस्या का समाधान करने में कामयाब रहे।

max परिभाषित करना Mehasse द्वारा सुझाए गए मूल्य को अवांछित टिक लाइनों को नहीं हटाया लेकिन मुझे जवाब खोजने में मदद मिली।

डिफ़ॉल्ट रूप से, प्राइमफ़ेस/jqplot 4 वाई-अक्ष टिक लाइन चाहता है। इस प्रकार, यदि अधिकतम मान 4 से नीचे है, तो वाई-अक्ष लेबल में डुप्लीकेट किया जाएगा जब वे गोलाकार होते हैं (formatString: '%d')।

क्या मैं मूल रूप से चाहते हैं, होना करने के लिए टिक अंतराल या तो Max(y) \ 4 जब Max(y) > 4, या अन्यथा 1:

function actionPlanExtender() { 
     var series_max =maxSeries(this.cfg.data); 
     var numberOfTicks =4; 
     var tickInterval = Math.max(1, Math.ceil(series_max/numberOfTicks)); 
     this.cfg.axes = { 
      xaxis : { 
       renderer : $.jqplot.DateAxisRenderer, 
       rendererOptions : { 
        tickRenderer:$.jqplot.CanvasAxisTickRenderer 
       }, 
       tickOptions : { 
        fontSize:'10pt', 
        fontFamily:'Tahoma', 
        angle:-40,      
        formatString:'%b-%y' 
       }, 
       tickInterval:'2592000000' 
      }, 
      yaxis : { 
       min: 0, 
       rendererOptions : { 
        tickRenderer:$.jqplot.CanvasAxisTickRenderer, 
       }, 
       tickOptions: { 
        fontSize:'10pt', 
        fontFamily:'Tahoma', 
        angle:0, 
        formatString: '%d', 
       }, 
       tickInterval: tickInterval 
      }, 
     }; 
     this.cfg.axes.xaxis.ticks = this.cfg.categories; 
    } 

y-अधिकतम मूल्य की गणना करने के लिए, मैं this.cfg.data का उपयोग कर साजिश मूल्य मिल रहा है जो है series_i = [[x_1, y_1],..., [x_m, y_m]]

साथ प्रपत्र [series_1,..., series_n] की maxSeries समारोह की तरह दिखता है:

function maxSeries(datas) { 
    var maxY = null; 
    var dataLength = datas.length; 
    for (var dataIdx = 0; dataIdx < dataLength; dataIdx++) { 
     var data = datas[dataIdx]; 
     var l = data.length; 
     for (var pointIdx = 0; pointIdx < l; pointIdx++) { 
      var point = data[pointIdx]; 
      var y = point[1]; 
      if (maxY == null || maxY < y) { 
       maxY = y; 
      } 
     } 
    } 
    return maxY; 
} 

ध्यान दें कि मेरे मामले में मुझे पता है कि मेरे मामले में मेरे पास 0 से कम मूल्य नहीं है। यदि यह मामला नहीं है तो यह कोड अपडेट किया जाना चाहिए।

Answer 2

मुझे आश्चर्य हुआ जब मैंने पहली बार जेक्यूप्लॉट का उपयोग करना शुरू किया कि यह बॉक्स के बाहर उचित धुरी लेबल नहीं चुनता है। यह वास्तव में ठीक करना आसान है।

मुझे लगता है कि आप अपने वाई अक्ष को शून्य पर शुरू करना चाहते हैं। यदि यह सत्य नहीं है, तो आपको इस कोड को थोड़ा सा संशोधित करने की आवश्यकता होगी।

// This is YOUR data set 
var series = [882, 38, 66, 522, 123, 400, 777]; 

// Instead of letting JQPlot pick the scale on the y-axis, let's figure out our own. 
var series_max = Math.max.apply(null, series); 
var digits = max.toString().length; 
var scale = Math.pow(10, max_digits - 1); 

var max = (Math.ceil(series_max/scale)) * scale; 

$.jqplot(
    'foo', 
    [series], 
    { 
     axes: { 
      yaxis: { 
       min: 0, 
       max: max 
      } 
     } 
     // Put your other config stuff here 
    } 
) 

यहाँ मूल विचार है कि हम अपने श्रृंखला में अधिकतम मूल्य के पास कुछ अच्छा, गोल मूल्य तकपूर्णांक बनाना चाहते हैं। विशेष रूप से, हम निकटतम संख्या तक पहुंचते हैं जिसमें बाएं सबसे अधिक को छोड़कर सभी अंकों में शून्य होती है। तो अधिकतम 882 परिणामस्वरूप वाई-अक्ष अधिकतम 1000 होगा।