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

附加/链接是我渲染的图形，我希望将图形颜色分为三行： 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示例，其中包含上述内容的精确实现。

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

1 个答案: