jqPlot: как цветные части фона/сетки с несколькими разными цветами

Question

Я использую отличный плагин jqPlot, и единственная функция, которую я не нашел в documentation, - это «как цвет частей фона/сетки с несколькими разными цветами "

Ограждениями по оси х моих графиков являются даты. Я хотел бы выделить часть выходного дня (только) сетки, изменив цвет сетки фона, если это возможно.

Или у кого-нибудь была бы другая идея?

Благодаря

ИЗМЕНИТЬ С окончательный ответ

основе по предложению Boro, я разработал лучший способ, чтобы выделить часть фона, используя опцию «строки» вместо опции «verticalLine». Дело в том, что с «verticalLine» разработчики должны иметь дело с шириной линии. Таким образом, получить то, что вам нужно, сложно, потому что ширина линии распространяется от центра линии, а не от границы.

"Line" option позволяет установить начальную и конечную точки, чтобы установить точную часть фона для выделения. Параметр width по-прежнему используется для отображения строки в виде столбца, но распространяется горизонтально, а не вертикально.

О свойствах «lineWidth», значение определяется в пикселях. Поэтому вы можете установить значение с высотой контейнера графа и установить значение «y» свойств «start» и «end» со средним значением ваших данных серии или приблизительным средним диапазоном вашего yaxis.

Я обновил скрипку Боро в 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

Я думаю, что пример показывает @Katya в коде под my answer to a related problem maight быть полезным для вас.

Direct link to the sample.

EDIT

Что касается второй части вам нужно будет использовать verticalLine и установите его значение x как миллисекунды, as presented here. Тогда вам нужно беспокоиться о выборе подходящего lineWidth.