JqPlot-如何减小网格和刻度的宽度

Question

我正在尝试使用jqplot部署条形图。现在如何减少网格和刻度的宽度？ 我已经通过将showGridline设置为false来移除了网格线，但它仍然垂直显示。

我的屏幕。

我希望x轴刻度看起来像这样。

我的js代码。

$(document).ready(function () {
    var s1 = [10, 20, 30, 40];
    // Can specify a custom tick Array.
    // Ticks should match up one for each y value (category) in the series.
    var ticks = [1, 2, 3, 4];
    var plot1 = $.jqplot('chart1', [s1], {
        // The "seriesDefaults" option is an options object that will
        // be applied to all series in the chart.
        seriesDefaults: {
            renderer: $.jqplot.BarRenderer,
            rendererOptions: {
                barMargin: 2,
                barWidth: 15
            }
        },
        grid: {
            drawBorder: false,
            background: '#ffffff',
            // CSS color spec for background color of grid   
        },
        axesDefaults: {
            tickRenderer: $.jqplot.CanvasAxisTickRenderer,
            tickOptions: {
                markSize: 4
            }
        },
        axes: {
            // Use a category axis on the x axis and use our custom ticks.          
            xaxis: {
                pad: -1.05,
                renderer: $.jqplot.CategoryAxisRenderer,
                ticks: ticks
            },
            yaxis: {
                pad: 1.05,
                tickOptions: {
                    formatString: '%d',
                    showGridline: false
                }
            }
        }
    });
});    

可能有人可以提供帮助吗？

Answer 1

要删除网格线，请在x轴和y轴上应用以下属性：

tickOptions: {
   showGridline: false
}

在您的代码中，您已将barWidth设置为15px。在绘制图形之前，请确保div的宽度不小于x轴tixks的数量* 15（约）。

或

根据div的宽度在运行时调整每个条的宽度。

以下是解决您问题的示例： JsFiddle link

HTML代码：

<div id="chart1" style="margin-top:20px; margin-left:20px; width:310px; height:300px;"></div>

Js代码：

$(document).ready(function () {
    var s1 = [10, 20, 30, 40, 50, 60, 70, 80, 90, 100];
    // Can specify a custom tick Array.
    // Ticks should match up one for each y value (category) in the series.
    var ticks = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
    var plot1 = $.jqplot('chart1', [s1], {
        // The "seriesDefaults" option is an options object that will
        // be applied to all series in the chart.
        seriesDefaults: {
            renderer: $.jqplot.BarRenderer,
            rendererOptions: {
                barMargin: 2,
                barWidth: 25
            },
            shadow: false
        },
        grid: {
            drawBorder: false,
            background: '#ffffff',
            // CSS color spec for background color of grid   
        },
        axesDefaults: {
            tickRenderer: $.jqplot.CanvasAxisTickRenderer,
            tickOptions: {
                markSize: 4
            }
        },
        axes: {
            // Use a category axis on the x axis and use our custom ticks.          
            xaxis: {
                pad: -1.05,
                renderer: $.jqplot.CategoryAxisRenderer,
                ticks: ticks,
                tickOptions: {
                    showGridline: false
                }
            },
            yaxis: {
                pad: 1.05,
                tickOptions: {
                    formatString: '%d',
                    showGridline: false
                }
            }
        }
    });
});