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

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" } },
                    ]
                  }