1

我正在使用 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 });

我得到没有网格线的图表。有什么想法，如何做到这一点？

4

2 回答 2

0

设置为白色 (#FFFFFF) 的 GridLineColor 解释了为什么您不使用垂直线。

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

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

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

请在此处查看工作示例（我已删除 yAxisLabels 并添加虚构数据以绘制绘图）

于 2013-08-12T14:03:04.537 回答
0

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

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

我试过它对我来说很好，。

于 2013-11-20T06:00:03.657 回答