JqPlot- How to decrease the width of grids and ticks

问题

I am trying to deploy barchart using jqplot. Now How to decrease the width of grids and ticks? I have removed the gridline by setting showGridline to false, But its still showing vertically.

My screen.

I want the x-axis ticks to appear something like this.

my js code.

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

May be someone can help?

回答1:

To remove the gridlines, apply below property on both x-axis and y-axis:

tickOptions: {
   showGridline: false
}

In you code you have set the barWidth to 15px. before drawing the graph please make sure the width of the div is no less more than the number of x-axis tixks * 15 (approx).

or

Adjust the width of each bar at runtime based on the width of your div.

Here is the example which solves your problem: JsFiddle link

HTML Code:

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

Js code:

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

来源：https://stackoverflow.com/questions/19224816/jqplot-how-to-decrease-the-width-of-grids-and-ticks