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

我正在尝试使用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链接

HTML代码：

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 } } } }); });