jqPlot: come colorare parti dello sfondo/griglia con diversi colori

Question

Sto utilizzando l'eccellente plug-in jqPlot e l'unica funzione che non ho trovato nello documentation è "come colorare parti dello sfondo/griglia" con diversi colori "

Le unità dell'asse x dei miei grafici sono date. Vorrei evidenziare la parte del fine settimana (solo) della griglia cambiando il colore della griglia dello sfondo, se possibile.

O qualcuno avrebbe un'altra idea?

Grazie

Modifica con risposta finale

Basato sul suggerimento del Boro, ho sviluppato un modo migliore per evidenziare una parte dello sfondo utilizzando l'opzione "linea" invece di opzione "verticalLine". Il fatto è che con "verticalLine", gli sviluppatori devono occuparsi della larghezza della linea. Quindi, è difficile ottenere ciò che è necessario perché la larghezza della linea si estende dal centro della linea e non da un bordo.

"Line" option consente di impostare punti di inizio e fine per impostare la parte esatta dello sfondo da evidenziare. Il parametro width viene comunque utilizzato per visualizzare la linea come una colonna, ma si estende orizzontalmente, non verticalmente.

Informazioni sulle proprietà "lineWidth", il valore è definito in pixel. Pertanto, è possibile impostare il valore con l'altezza del contenitore del grafico per essere sicuri e impostare il valore "y" delle proprietà "start" e "end" con una media dei dati della serie o un intervallo medio approssimativo degli yax.

ho aggiornato violino del Boro here

   grid:     
       { 
        drawGridLines: true,  // wether to draw lines across the grid or not. 
        gridLineColor: '#cccccc', // Color of the grid lines. 
        backgroundColor: "#eee", 
        borderColor: '#999999',  // CSS color spec for border around grid. 
        borderWidth: 2.0,   // pixel width of border around grid. 
        shadow: true,    // draw a shadow for grid. 
        shadowAngle: 45,   // angle of the shadow. Clockwise from x axis. 
        shadowOffset: 1.5,   // offset from the line of the shadow. 
        shadowWidth: 3,    // width of the stroke for the shadow. 
        shadowDepth: 3,    // Number of strokes to make when drawing shadow. 
               // Each stroke offset by shadowOffset from the last. 
        shadowAlpha: 0.07,   // Opacity of the shadow 
       }, 
       canvasOverlay: { 
        show: true, 
        objects: 

          [ 
           { 
            line: 
            { 
             start : [new Date('2012-01-12').getTime(),20],             
             stop : [new Date('2012-01-13').getTime(),20],             
             lineWidth: 1000, 
             color: 'rgba(255, 0, 0,0.45)', 
             shadow: false, 
             lineCap : 'butt' 
            } 
           },          
           { 
            line: 
            { 
             start : [new Date('2012-01-13').getTime(),20],             
             stop : [new Date('2012-01-14').getTime(),20],             
             lineWidth: 1000, 
             color: 'rgba(255, 0, 0,0.45)', 
             shadow: false, 
             lineCap : 'butt' 
            } 
           } 
          ] 
       }      

Answer 1

Credo che il campione indicato dalla @Katya nel codice sotto my answer to a related problem maight essere utile per voi.

Direct link to the sample.

EDIT

Per quanto riguarda la seconda parte si avrebbe bisogno di utilizzare un verticalLine e impostare il valore x come millisecondi, as presented here. Quindi è necessario preoccuparsi di selezionare appropriato lineWidth.