jqPlot 填充具有 x 轴的垂直部分是一个字符串

Question

我无法 draw/fill 图表中的垂直部分，如本例所示：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" } },
                             ]
                }   
            });

Attached/linked 是我渲染的图形，我想将我的图形按行分为三个部分： my rendered graph

Answer 1

查看您的图表我假设您的数据与此类似：

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

的确，您需要输入矩形数值限制，并且您有基于 string 的 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 示例，上面有一个精确的实现。

jqPlot 填充具有 x 轴的垂直部分是一个字符串

jqPlot fill vertical portion having x-axis is a string

jqplot