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

【问题标题】：JqPlot- How to decrease the width of grids and ticksJqPlot-如何减小网格和刻度的宽度
【发布时间】：2013-10-07 12:22:51
【问题描述】：

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

有人可以帮忙吗？

【问题讨论】：

标签： javascript jquery jqplot bar-chart

【解决方案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
                }
            }
        }
    });
});

【讨论】：