jqPlot - Wie ändere ich die Deckkraft oder den Z-Index von canvasOverlay?

Ich möchte 3 Farbzonen in meinem Diagramm auf dem Hintergrund gemäß dem Wert der y-Achse anzeigen. Ich verstehe, dass ich die Hintergrundfarbe nicht durch verschiedene Farben steuern kann.

Meine Idee ist, 3 horizontale Linien mit canvasOverlay zu zeichnen - das funktioniert. Das Problem ist, dass ich diese Linien hinter meiner Grafikkurve platzieren möchte. Jetzt ist sie auf der Vorderseite zu sehen und überlagert meine Punktelinie.

Kann ich die Eigenschaft des Z-Index oder die Deckkraft ändern?

Vielleicht noch ein paar andere Ideen?

<code>  $.jqplot( 'ChartDIV', [data],
        {
            series: [{ showMarker: true}],
            highlighter: {
                sizeAdjust: 10,
                show: true,
                tooltipLocation: 'n',
                useAxesFormatters: true
            },

            tickOptions: {
                formatString: '%d'
            },
            canvasOverlay: {
                show: true,
                objects: [ 
                            {
                                horizontalLine: 
                                {      
                                    name: 'low', 
                                    y: 1.0,
                                    lineWidth: 100,
                                    color: 'rgb(255, 0, 0)',
                                    shadow: false 
                                }
                            },      
                            {
                                horizontalLine:
                                { 
                                    name: 'medium',
                                    y: 2.0,
                                    lineWidth: 100, 
                                    color: 'rgb(250, 250, 0)', 
                                    shadow: true 
                                }
                            },
                            {
                                 horizontalLine:
                                {
                                    name: 'high',
                                    y: 3.0,
                                    lineWidth: 100,
                                    color: 'rgb(145, 213, 67)',
                                    shadow: false
                                }
                             },  
                        ]       
                    },
            axes: {
                xaxis:
                {
                    label: 'Dates',
                    renderer: $.jqplot.DateAxisRenderer,
                    rendererOptions: { tickRenderer: $.jqplot.CanvasAxisTickRenderer },
                    tickOptions: {
                        formatString: '%d/%m/%Y',
                        angle: -30,
                        fontFamily: 'Arial',
                        fontSize: '13px',
                        fontWeight: 'bold'
                    },
                    min: d[0] + "/" + d[1] + "/01", 
                    tickInterval: '2 month',
                    labelOptions: {
                        fontFamily: 'Arial',
                        fontSize: '14pt',
                        fontWeight: 'bold',
                        textColor: '#0070A3'
                    }
                },
                yaxis:
                {
                    label: 'Level',
                    labelRenderer: $.jqplot.CanvasAxisLabelRenderer,
                    tickOptions: {
                        formatter: $.jqplot.tickNumberFormatter
                    },
                    rendererOptions: { tickRenderer: $.jqplot.CanvasAxisTickRenderer },
                    labelOptions: {
                        fontFamily: 'Arial',
                        fontSize: '14pt',
                        fontWeight: 'bold',
                        textColor: '#0070A3',
                        angle: -90
                    }

                }
            }
        } );
</code>

Antworten auf die Frage(2)

Ihre Antwort auf die Frage