散布図に複数の背景色を設定する

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