在散点图中设置多种背景颜色

Question

我用 jqplot 库绘制了这个散点图。我有这个代码：

$(document).ready(function() {              
                
                var qr = [
                    [1, 5, null],
                    [4, 2, null],
                    [6, 5, '2'],
                    [4, 5, '3'],
                    [0, 5, null],
                    [4, 5, '3'],
                    [6, 5, '2'],
                    [4, 5, '3']
                ];
                var max = 15;
                var min = -15;                                          
                var gr_html = null;
                gr_html = $.jqplot('linegraph', [qr], {
                    seriesDefaults: {
                        showLine: false,
                        markerRenderer: $.jqplot.MarkerRenderer,
                        markerOptions: {
                            size: 5
                        }
                    },
                    series: [{
                        pointLabels: {
                            show: false,
                        },
                        markerOptions: {
                            style: 'triangle',
                            size: 5,
                        },
                    }],
                    axes: {
                        xaxis: {
                            label: 'Score',
                            min: min,
                            max : max,
                            numberTicks: 3,
                            showGridline: false
                        },
                        yaxis: {
                            renderer: $.jqplot.canvasTextRenderer,
                            label: 'Rate',
                            labelRenderer: $.jqplot.CanvasAxisLabelRenderer,
                            labelOptions: {
                                fontSize: '10pt'
                            },
                            min: min,
                            max : max,
                            numberTicks: 3,
                            showGridline: false
                        },
                    },
                    grid: {
                        drawGridLines: true,        // wether to draw lines across the grid or not.
                        gridLineColor: '#cccccc',   // *Color of the grid lines.
                        background: '#fffdf6',      // CSS color spec for background color of grid.
                        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
                        renderer: $.jqplot.CanvasGridRenderer,  // renderer to use to draw the grid.
                        rendererOptions: {}         // options to pass to the renderer.  Note, the default
                                                    // CanvasGridRenderer takes no additional options.
                    }
                });         

                

                
                $("#botonZoom").click(function(){
                    max = max -1;
                    min = min +1;
                    gr_html.replot({resetAxes:['xaxis'], axes:{xaxis:{max:max,min:min,numberTicks:3}}});
                    gr_html.replot({resetAxes:['yaxis'], axes:{yaxis:{max:max,min:min,numberTicks:3}}});
                    
                    <!-- gr_html.replot({resetAxes:true}) -->
                });
                $("#botonZoom2").click(function(){
                    max = max +1;
                    min = min-1;
                    gr_html.replot({resetAxes:['xaxis'], axes:{xaxis:{max:max,min:min,numberTicks:3}}});
                    gr_html.replot({resetAxes:['yaxis'], axes:{yaxis:{max:max,min:min,numberTicks:3}}});
                });
            });

问题很简单。我可以为谁着色象限的背景？如果我改变网格上的背景，我只能改变一种颜色。我尝试将图像设置为 bacgroun 但它不起作用，我需要做什么才能获得类似图像的东西？我需要这样的东西：

Answer 1

您需要添加 canvasOverlay 插件，然后应用此代码：

添加canvasOverlay

<script language="javascript" type="text/javascript" src="jqplot/plugins/jqplot.canvasOverlay.js"></script>

添加此代码

canvasOverlay: {
                    show: true,
                    objects: [
                      { rectangle:  { xmin:min, xmax:0 , ymin: 0, ymax: max, xminOffset: "0px", xmaxOffset: "0px", yminOffset: "0px", ymaxOffset: "0px",
                                color: "rgba(255, 255, 0, 0.3)", showTooltip: true, tooltipFormatString: "Ideal Zone" } },
                        { rectangle: { xmin:0, xmax:max , ymin: 0, ymax: max, xminOffset: "0px", xmaxOffset: "0px", yminOffset: "0px", ymaxOffset: "0px",
                                color: "rgba(0, 255, 0, 0.3)", showTooltip: true, tooltipFormatString: "Ideal Zone" } },
                        { rectangle: { xmin:min, xmax:0 , ymin: min, ymax: 0, xminOffset: "0px", xmaxOffset: "0px", yminOffset: "0px", ymaxOffset: "0px",
                                color: "rgba(255, 0, 0, 0.3)", showTooltip: true, tooltipFormatString: "Ideal Zone" } },
                        { rectangle: { xmin:0, xmax:max , ymin: min, ymax: 0, xminOffset: "0px", xmaxOffset: "0px", yminOffset: "0px", ymaxOffset: "0px",
                                color: "rgba(255, 165, 0, 0.3)", showTooltip: true, tooltipFormatString: "Ideal Zone" } },
                    ]
                  }

在散点图中设置多种背景颜色

Set multiple background color in scatterplot

javascript

jquery

css

jqplot