jqPlot: wie man Teile des Hintergrunds / Gitters mit verschiedenen Farben färbt

Ich benutze die ausgezeichnetejqPlot Plug-in und die einzige Funktion, die ich in der nicht gefunden habeDokumentation ist "wie man Teile des Hintergrunds / Gitters mit verschiedenen Farben färbt"

Die Einheiten der x-Achse in meinen Diagrammen sind Datumsangaben. Ich möchte den Wochenendteil (nur) des Gitters hervorheben, indem ich die Hintergrundgitterfarbe ändere, falls dies möglich ist.

Oder hätte jemand eine andere Idee?

Vielen Dank

BEARBEITEN MIT ENDGÜLTIGER ANTWORT

Basierend auf dem Vorschlag von Boro habe ich eine bessere Methode entwickelt, um einen Teil des Hintergrunds mit der Option "line" anstelle der Option "verticalLine" hervorzuheben. Tatsache ist, dass Entwickler bei "verticalLine" mit der Linienbreite umgehen müssen. Daher ist es schwierig, das zu ermitteln, was Sie benötigen, da sich die Linienbreite vom Mittelpunkt der Linie und nicht von einem Rand aus erstreckt.

Option "Leitung" Ermöglicht das Festlegen eines Start- und Endpunkts, um den genauen Teil des Hintergrunds hervorzuheben. Der width-Parameter wird weiterhin verwendet, um die Linie als Spalte anzuzeigen. Er wird jedoch horizontal und nicht vertikal verteilt.

Über die Eigenschaften "lineWidth" wird der Wert in Pixel definiert. Aus diesem Grund können Sie den Wert mit der Höhe des Diagrammcontainers festlegen, um sicherzustellen, dass die Eigenschaften "Start" und "Ende" den Wert "y" aufweisen, der aus dem Durchschnitt Ihrer Seriendaten oder einem ungefähren mittleren Bereich Ihrer Yaxis besteht.

Ich habe die Geige des Boros aktualisiertHier

                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'
                                    }
                                }
                            ]
                }                    

Antworten auf die Frage(1)

Ihre Antwort auf die Frage