Question

我正在使用jqplot图表库在我的应用程序中绘制条形图。我使用以下代码绘制水平条形图。

   var plot = $.jqplot('chart', [dataSlices], {
                seriesDefaults: {
                    shadow: false,
                    renderer: $.jqplot.BarRenderer,
                    pointLabels: { show: true, location: 'e', edgeTolerance: -55 },
                    rendererOptions: {
                        barDirection: 'horizontal',
                        barMargin: 5,
                        highlightMouseOver: false,
                        fillToZero: true
                    }
                },
                axesDefaults: {

                },
                axes: {
                    grid: {
                        drawBorder: false
                    },
                    xaxis: {
                        pad: 0,
                        tickOptions: {
                            show: true,
                            mark: 'cross',
                            thousandsSeparator: ',',
                            formatString: "%d"
                        },
                        numberTicks: null,
                        min: null,
                        max: null,
                        showTickMarks: true
                    },
                    yaxis: {
                        renderer: $.jqplot.CategoryAxisRenderer,
                        ticks: yAxisLabels,
                        tickOptions: {
                            showMark: false,
                            showGridline: false
                        }
                    }
                },
                grid: {
                    gridLineColor: '#ffffff', /**/
                    borderColor: '#509790',
                    background: 'rgba(0,0,0,0)',
                    shadowWidth: 0,
                    borderWidth: 0,
                    shadow: false
                },
                series: [{ color: '#f39f02' }]
            });

            $.jqplot.thousandsSeparator = ',';
            //$.jqplot.formatString = "%'d";
            gridCanvas = $($('.jqplot-grid-canvas')[0])
            seriesCanvas = $($('.jqplot-series-canvas')[0])
            gridCanvas.detach();
            seriesCanvas.after(gridCanvas);
           plot.replot({ resetAxes: true });

我得到没有网格线的图表。有什么想法，怎么做？

Answer 1

GridLineColor设置为白色（#FFFFFF）解释了为什么你没有看到垂直线。

BorderWidth设置为0解释了为什么您没有查看绘图的边框（以0px的大小绘制）

如果您不需要网格的特定颜色和/或大小（垂直线和边框），请删除代码的网格部分。如果您需要特定的颜色和/或尺寸，请仔细选择您的值（#FFFFFF如果您的背景已经是白色 - 或者borderWidth为0px）：

grid: {
 gridLineColor: '#FF0000',
 borderColor: '#509790',
 background: 'rgba(0,0,0,0)',
 shadowWidth: 0,
 borderWidth: 2,
 shadow: false
},

请参阅工作示例here（我删除了yAxisLabels并添加了虚构数据以绘制图表）

Answer 2

重新绘制后调用以下行，您将获得预期结果

                gridCanvas = $($(item + ' .jqplot-grid-canvas')[0])
                seriesCanvas = $($(item + ' .jqplot-series-canvas')[0])
                gridCanvas.detach();
                seriesCanvas.after(gridCanvas);

我试着为我工作，。

重新绘制后，图表网格线消失

2 个答案: