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轴的垂直部分是一个字符串

回答

相关问题