jqPlot x軸を含む垂直部分を文字列にします

Question

この例に示すように、私のグラフには垂直部分を描画/塗りつぶすことができません：http://services.mbi.ucla.edu/jqplot/examples/draw-rectangles.html。私が知っているように、x軸は数値でなければならず、グラフではx軸が文字列です。

私は私のプロットを描く：リンク/添付

plot2 = $.jqplot('chartplot'+index, [s3], { 
       seriesDefaults: { 
        renderer :$.jqplot.BarRenderer, 
        pointLabels: { show: true }, 
        rendererOptions: {shadow:false } 
       }, 
       series: [{label:"Average Fu - "+single_legend_lbl+""}], 
       legend: { 
        show: true, 
        placement: 'insideGrid' 
       }, 
       axesDefaults: { 
        tickRenderer: $.jqplot.CanvasAxisTickRenderer , 
        tickOptions: { formatString: '%#d' }  
       }, 
       axes: { 
        xaxis: { 
         renderer: $.jqplot.CategoryAxisRenderer, 
         ticks: ticks, 
         tickOptions: { 
          angle: -90, 
          fontSize: '10pt', 
         } 
        } 
       }, 
       seriesColors: [bar_color], 
       canvasOverlay: { 
        show: true, 
        objects: [ 
           { rectangle: { xmin: 'Silver Fu', xmax: 'Light Green Fu', xminOffset: "0px", xmaxOffset: "0px", yminOffset: "0px", ymaxOffset: "0px", 
           color: "rgba(0, 200, 200, 0.3)", showTooltip: true, tooltipFormatString: "Holidays" } }, 
          ] 
       } 
      }); 

は私のレンダリングされたグラフであり、私は行ごとに3つのセクションに私のグラフを色付けしたい：あなたのグラフを表示する my rendered graph

Answer 1

私はあなたのデータがあると仮定

var s3 = [['one', 2], ['two', 15], ['three', 1]]; 

確かにあなたが入力した矩形の数値制限を必要とする、とあなたはを持っています。これに類似ベースのx軸値。あなたにできることは、元のs3の配列を取得し、最初の列だけを含む新しい配列を作成することです：['one, 'two', three']、あなたがそれを行うには、以下の機能を使用することができます（'Get column from a two-dimensional array in JavaScript'についての詳細を読む）：

function arrayColumn(arr, n) { 
    return arr.map(x=> x[n]); 
} 

var firstcolumnArray = arrayColumn(s3, 0) 

firstcolumnArrayを作成した後、あなたはこのように、長方形の境界線として使用される対応する数値にあなたの文字列値をマッピングするために.indexOf()機能でそれを使用することができます。

{rectangle: { 
    name: 'stddev', 
    xmin: firstcolumnArray.indexOf('one')+1, 
    xmax: firstcolumnArray.indexOf('two')+1,      
    color: 'rgba(150,150,150,0.3)', 
    shadow: false 
}} 

をここでは上記の正確な実装で、作業jsfiddle例です。