jqPlot: cách tô màu các phần của nền/lưới với nhiều màu khác nhau

Question

Tôi đang sử dụng plugin tuyệt vời jqPlot và tính năng duy nhất mà tôi không tìm thấy trong documentation là "cách tô màu các phần của nền/lưới với nhiều màu khác nhau "

Đơn vị trục x của biểu đồ của tôi là ngày. Tôi muốn làm nổi bật phần cuối tuần (chỉ) của lưới bằng cách thay đổi màu nền lưới nếu có thể.

Hoặc bất kỳ ai sẽ có ý tưởng khác?

Cảm ơn

EDIT VỚI ĐÁP CUỐI CÙNG

Dựa trên đề nghị của Boro, tôi đã phát triển một cách tốt hơn để làm nổi bật một phần của nền sử dụng "dòng" tùy chọn thay vì tùy chọn "verticalLine". Thực tế là với "verticalLine", các nhà phát triển phải đối phó với chiều rộng dòng. Do đó, rất khó để có được những gì bạn cần bởi vì chiều rộng của đường lây lan từ trung tâm của đường chứ không phải từ một đường viền.

"Line" option cho phép đặt điểm bắt đầu và điểm kết thúc để đặt phần chính xác của nền làm nổi bật. Tham số chiều rộng vẫn được sử dụng để hiển thị dòng dưới dạng cột, nhưng nó lan truyền theo chiều ngang, không theo chiều dọc.

Giới thiệu về thuộc tính "lineWidth", giá trị được xác định bằng pixel. Do đó, bạn có thể đặt giá trị với chiều cao vùng chứa biểu đồ để chắc chắn và đặt giá trị "y" của thuộc tính "bắt đầu" và "kết thúc" với mức trung bình của dữ liệu chuỗi hoặc phạm vi trung bình xấp xỉ của yaxis.

tôi cập nhật của Boro fiddle 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

Tôi nghĩ rằng mẫu thể hiện bởi @Katya trong các mã dưới my answer to a related problem maight thể hữu ích cho bạn.

Direct link to the sample.

EDIT

Liên quan đến phần thứ hai bạn sẽ cần phải sử dụng một verticalLine và thiết lập giá trị của nó x như mili giây, as presented here. Sau đó, bạn cần phải lo lắng về việc chọn thích hợp lineWidth.