JqPlot-如何减少网格和刻度线的宽度 [英] JqPlot- How to decrease the width of grids and ticks

问题描述

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

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.

我的屏幕.

我希望x轴刻度线出现类似这样的内容.

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

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

也许有人可以帮忙吗?

推荐答案

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

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

tickOptions: {
   showGridline: false
}

在代码中，您已将barWidth设置为15px.绘制图形之前，请确保div的宽度不小于x轴像素数* 15(大约).

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).

或

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

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

以下是解决您的问题的示例: JsFiddle链接

Here is the example which solves your problem: 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
                }
            }
        }
    });
});

这篇关于JqPlot-如何减少网格和刻度线的宽度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！