jqPlot - Jak zmienić przezroczystość lub z-index canvasOverlay?

Question

Chciałbym pokazać 3 strefy kolorów na moim wykresie na tle zgodnie z wartością osi Y, ponieważ rozumiem, nie mogę kontrolować koloru tła za pomocą różnych kolorów.

Mój pomysł polega na narysowaniu 3 linii poziomych za pomocą canvasOverlay - to działa. Problem polega na tym, że chcę umieścić tę linię za krzywą wykresu, teraz widzianą z przodu i pokrywa się z moją linią punktów.

Czy mogę zmienić właściwość z-index lub krycie?

Może jakieś inne pomysły?

$.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

Myślę, że twój problem może być w takiej kolejności, w jakiej wykonujesz swoje malowanie. Myślę, że najpierw tworzysz wykres, a następnie rysujesz w tym wierszu, w prawo ?.

Tak więc, aby posortować nasze dane, możesz wypróbować jeden z haczyków, który zapewnia wykres jqPlot.

Aby zobaczyć, jak można użyć haczyka, please see my other answer (BTW na moje własne pytanie :) gdzie użyłem haka postDrawHooks, aby zmienić format etykiet po narysowaniu wykresu. W twoim przypadku możesz użyć preDrawHooks lub może bardziej odpowiednie byłoby użycie preDrawSeriesHooks, ponieważ nie jestem pewien, czy płótno jest gotowe do użycia po wywołaniu funkcji podanej w preDrawHooks.

Pamiętaj, że according to the documentation, preDrawSeriesHooks jest wywoływana za każdym razem, zanim seria zostanie narysowana, dlatego w twoim przypadku potrzebujesz go do pracy tylko raz.

EDIT

W tym przypadku odpowiedź jest prosta, ale można to zrobić zarówno, który jest pokazany w moim jsfiddle, available here.

Trzeba ten kawałek kodu, aby wysłać nakładki płótno do tyłu, który należy umieścić przed kodem malowania wykresu:

$.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 
}); 

Ale jeśli chodzi o krycie można zastosować go do dowolnej linii lubisz (pokazany również w moim kodu), stosując metody rgba() dla serii to odbywa się w ten sposób:

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

dla linii na płótnie, możesz zrobić to tak:

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

---

EDIT2

Najważniejsze, że był w związku z tym zapomniał z poprzednim kodzie wyróżnienia nie działa. Po prostu płótno eventowe odpowiedzialne za wychwytywanie i propagowanie zdarzeń zostało ukryte pod naszym płótnem. Został poprawiony w aktualnej wersji kodu, ustawiając dla niego odpowiedni z-index.Pełna metoda wyglądałby następująco:

$.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: Znacznie ładniejszy rozwiązanie, gdzie nie musimy się martwić o ustawienie 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. To rozwiązanie jest inspired by the answer provided by @Mark do podobnego rodzaju problemu.

Answer 2

O wiele lepszym rozwiązaniem jest użycie obiektu Canvas prostokąt bez włamania 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" } } 
     ] 
     } 
    }); 
});