javascript - 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 链接

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