jqPlot填充x軸的垂直部分是一個字符串

我不能在我的圖表中繪製/填充垂直部分，就像在此示例中顯示的那樣：http://services.mbi.ucla.edu/jqplot/examples/draw-rectangles.html。據我所知，x軸應該是數字，在我的圖中我有x軸是字符串。jqPlot填充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" } }, 
          ] 
       } 
      });

附加/鏈接的是我的渲染圖，我想顏色，我圖分爲三個部分按行： my rendered graph

來源

2016-09-19 Abhi Kumar

查看你的圖我假設你的數據類似這樣的：

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例如，用一個確切落實上述。

來源

2016-09-19 09:17:48

jqPlot填充x軸的垂直部分是一個字符串

回答

相關問題