jqPlot: cómo colorear partes de fondo/cuadrícula con varios colores diferentes

Question

Estoy usando el excelente jqPlot plug-in, y la única característica que no encontré en el documentation es "cómo colorear partes de fondo/grilla" con varios colores diferentes "

Las unidades del eje x de mis gráficos son fechas. Me gustaría resaltar la parte del fin de semana (solamente) de la grilla cambiando el color de la cuadrícula de fondo si es posible.

¿O alguien podría tener otra idea?

Gracias

edición con respuesta final

Sobre la base de la propuesta del Boro, he desarrollado una mejor manera de resaltar una parte del fondo utilizando la opción "línea" en lugar de la opción "línea vertical". El hecho es que con "verticalLine", los desarrolladores deben lidiar con el ancho de la línea. Por lo tanto, es difícil obtener lo que necesita porque el ancho de la línea se extiende desde el centro de la línea y no desde un borde.

"Line" option permite establecer un punto inicial y un punto final para establecer la parte exacta del fondo a resaltar. El parámetro ancho todavía se usa para mostrar la línea como una columna, pero se extiende horizontalmente, no verticalmente.

Acerca de las propiedades "lineWidth", el valor se define en píxeles. Por lo tanto, puede establecer el valor con la altura del contenedor gráfico para asegurarse y establecer el valor "y" de las propiedades "inicio" y "final" con un promedio de los datos de su serie o un rango medio aproximado de su eje.

I Actualizado violín 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

Creo que el ejemplo que se muestra por @Katya en el código bajo my answer to a related problem maight ser útil para usted.

Direct link to the sample.

EDITAR

En cuanto a la segunda parte que tendría que utilizar un verticalLine y establezca su valor como x milisegundos, as presented here. Luego debe preocuparse por seleccionar el lineWidth apropiado.