jqPlot - कैनवास ओवरले की अस्पष्टता या जेड-इंडेक्स को कैसे बदला जाए?

Question

मैं वाई अक्ष मूल्य के अनुसार पृष्ठभूमि पर अपने ग्राफ पर 3 रंग क्षेत्र दिखाना चाहता हूं, जैसा कि मैं समझता हूं, मैं विभिन्न रंगों से पृष्ठभूमि रंग को नियंत्रित नहीं कर सकता।

मेरा विचार कैनवास ओवरले के साथ 3 क्षैतिज रेखाएं खींचना है - यह काम कर रहा है। समस्या यह है कि मैं अपने ग्राफ वक्र के पीछे इस लाइन को रखना चाहता हूं, अब यह सामने की तरफ देखा गया है और यह मेरी पॉइंट लाइन ओवरले करता है।

क्या मैं जेड-इंडेक्स या अस्पष्टता की संपत्ति बदल सकता हूं?

शायद कुछ अन्य विचार?

$.jqplot('ChartDIV', [data], 
     { 
      series: [{ showMarker: true}], 
      highlighter: { 
       sizeAdjust: 10, 
       show: true, 
       tooltipLocation: 'n', 
       useAxesFormatters: true 
      }, 

      tickOptions: { 
       formatString: '%d' 
      }, 
      canvasOverlay: { 
       show: true, 
       objects: [ 
          { 
           horizontalLine: 
           {  
            name: 'low', 
            y: 1.0, 
            lineWidth: 100, 
            color: 'rgb(255, 0, 0)', 
            shadow: false 
           } 
          },  
          { 
           horizontalLine: 
           { 
            name: 'medium', 
            y: 2.0, 
            lineWidth: 100, 
            color: 'rgb(250, 250, 0)', 
            shadow: true 
           } 
          }, 
          { 
           horizontalLine: 
           { 
            name: 'high', 
            y: 3.0, 
            lineWidth: 100, 
            color: 'rgb(145, 213, 67)', 
            shadow: false 
           } 
          }, 
         ]  
        }, 
      axes: { 
       xaxis: 
       { 
        label: 'Dates', 
        renderer: $.jqplot.DateAxisRenderer, 
        rendererOptions: { tickRenderer: $.jqplot.CanvasAxisTickRenderer }, 
        tickOptions: { 
         formatString: '%d/%m/%Y', 
         angle: -30, 
         fontFamily: 'Arial', 
         fontSize: '13px', 
         fontWeight: 'bold' 
        }, 
        min: d[0] + "/" + d[1] + "/01", 
        tickInterval: '2 month', 
        labelOptions: { 
         fontFamily: 'Arial', 
         fontSize: '14pt', 
         fontWeight: 'bold', 
         textColor: '#0070A3' 
        } 
       }, 
       yaxis: 
       { 
        label: 'Level', 
        labelRenderer: $.jqplot.CanvasAxisLabelRenderer, 
        tickOptions: { 
         formatter: $.jqplot.tickNumberFormatter 
        }, 
        rendererOptions: { tickRenderer: $.jqplot.CanvasAxisTickRenderer }, 
        labelOptions: { 
         fontFamily: 'Arial', 
         fontSize: '14pt', 
         fontWeight: 'bold', 
         textColor: '#0070A3', 
         angle: -90 
        } 

       } 
      } 
     }); 

Answer 1

मुझे लगता है कि आपकी समस्या वह आदेश हो सकती है जिसमें आप अपनी पेंटिंग करते हैं। मुझे लगता है कि आप पहले ग्राफ बनाते हैं और फिर इसमें आप इस रेखा को आकर्षित करते हैं, है ना?

इस प्रकार हमारे सॉर्ट करने के लिए आप jqPlot चार्ट प्रदान करता है।

यह देखने के लिए कि आप एक हुक, please see my other answer (बीटीडब्लू अपने स्वयं के प्रश्न के लिए कैसे उपयोग कर सकते हैं :) जहां मैंने ग्राफ़ खींचा जाने के बाद लेबल के प्रारूप को बदलने के लिए postDrawHooks हुक का उपयोग किया था। आपके मामले में आप preDrawHooks का उपयोग कर सकते हैं या preDrawSeriesHooks का उपयोग करने के लिए शायद अधिक उचित होगा, क्योंकि मुझे यकीन नहीं है कि preDrawHooks में फ़ंक्शन पारित होने पर कैनवास उपयोग करने के लिए तैयार है या नहीं।

याद रखें कि, according to the documentation, preDrawSeriesHooks को श्रृंखला तैयार होने से पहले हर बार बुलाया जाता है, इस प्रकार आपके मामले में आपको इसे केवल एक बार काम करने की आवश्यकता होगी।

संपादित

इस मामले जवाब सरल है में, अच्छी तरह से तुम दोनों है, जो मेरी jsfiddle, available here में दिखाया गया है कर सकता है।

आप कोड के इस टुकड़े की जरूरत ओवरले अपने ग्राफ पेंटिंग वापस करने के लिए, कोड से पहले जो आप रखना चाहिए कैनवास भेजने के लिए:

$.jqplot.postDrawHooks.push(function(){ 
    $(".jqplot-overlayCanvas-canvas").css('z-index', '0');//send overlay canvas to back 
    $(".jqplot-series-canvas").css('z-index', '1');//send series canvas to front 
}); 

लेकिन जब यह अस्पष्टता की बात आती है तो आप इसे लागू हो सकते हैं, जो भी करने के लिए लाइन आप की तरह श्रृंखला के लिए यह इस तरह से किया जाता है (यह भी मेरी कोड में दिखाया गया है), rgba() विधि का उपयोग करते हुए,:

seriesColors:['rgba(100, 150, 100, 0.75)'] 

कैनवास पर लाइनों के लिए

, आप इसे इस तरह से कार्य करें:

color: 'rgba(145, 213, 67, 0.25)' 

---

EDIT2

सबसे महत्वपूर्ण लगता है कि पिछले कोड हाइलाइटर काम कर रहा था के साथ इसलिए भुला दिया गया। घटना घटना कैनवास जो घटना पकड़ने और प्रचार के लिए ज़िम्मेदार है, हमारे कैनवास के नीचे छिपा हुआ था। इसे कोड के वर्तमान संस्करण में सही किया गया था, इसके लिए उचित z-index सेट करके।पूरा विधि लगेगा जैसे:

$.jqplot.postDrawHooks.push(function() { 
    $(".jqplot-overlayCanvas-canvas").css('z-index', '0'); //send overlay canvas to back 
    $(".jqplot-series-canvas").css('z-index', '1'); //send series canvas to front   
    $(".jqplot-highlighter-tooltip").css('z-index', '2'); //make sure the tooltip is over the series 
    $(".jqplot-event-canvas").css('z-index', '5'); //must be on the very top since it is responsible for event catching and propagation 
}); 

---

EDIT3: एक बहुत अच्छे समाधान जहां हम z-index स्थापित करने के बारे में चिंता करने की जरूरत नहीं है।

$.jqplot.postDrawHooks.push(function() { 
    var overlayCanvas = $($('.jqplot-overlayCanvas-canvas')[0]) 
    var seriesCanvas = $($('.jqplot-series-canvas')[0]) 
    seriesCanvas.detach(); 
    overlayCanvas.after(seriesCanvas); 
}); 

It is presented here. यह समाधान समस्या का एक समान प्रकार के inspired by the answer provided by @Mark है।

Answer 2

एक बहुत बेहतर समाधान किसी भी http://services.mbi.ucla.edu/jqplot/examples/draw-rectangles.html

$(document).ready(function(){ 
    var plot1 = $.jqplot ('chart1', [[30,-10,90,20,50,130,80,120,50]], { 
     canvasOverlay: { 
     show: true, 
     objects: [ 
      { rectangle: { ymax: 0, xminOffset: "0px", xmaxOffset: "0px", yminOffset: "0px", ymaxOffset: "0px", 
        color: "rgba(0, 0, 200, 0.3)", showTooltip: true, tooltipFormatString: "Too Cold" } }, 
      { rectangle: { ymin: 100, xminOffset: "0px", xmaxOffset: "0px", yminOffset: "0px", ymaxOffset: "0px", 
        color: "rgba(200, 0, 0, 0.3)", showTooltip: true, tooltipFormatString: "Too Warm" } } 
     ] 
     } 
    }); 
});