JQPlot Y-Axis Label Offset

问题

My JQPlot chart is currently rendering everything correctly, but the only issue is that the tick labels are being overlapped by the chart. Is there anyway I can offset the labels to prevent this from happening or a simple option change? I haven't found anything on the JQPlot website about this, so any help would be appreciated. Here's some sample code:

var moduleTypesChart = $.jqplot("moduleTypesChart",[moduleTypesCount], {
                            title:'<h2>Module Types Distribution</h2>',
                            seriesColors:["darkred"],
                            seriesDefaults:{
                                renderer:$.jqplot.BarRenderer,
                                rendererOptions: {fillToZero: true, varyBarColor: false}
                            },
                            axesDefaults:{
                                tickRenderer: $.jqplot.CanvasAxisTickRenderer,
                                tickOptions:{
                                    angle: -15,
                                    textColor:'black',
                                    labelPosition:'middle',
                                    fontFamily:"Arial",
                                    fontWeight:"bold"
                                }
                            },
                            axes: {
                                xaxis: {
                                    renderer: $.jqplot.CategoryAxisRenderer,
                                    ticks: moduleTypes
                                }
                            },
                            grid: {
                                background:'Gainsboro',
                                gridLineColor:'LightSteelBlue'
                            }

回答1:

You can do this by modifying the CSS.

In your jqPlot directory are two files: jquery.jqplot.css and jquery.jqplot.min.css

Inside is a CSS class for y-axis labels:

.jqplot-yaxis-label {
    margin-right: 20px;
    font-size: 11pt;
    position: absolute;
}

You can increase the right margin to avoid overlapping with the ticks.

Remember to make sure to link to one of these files in the head of your HTML document, for example:

<link rel='stylesheet' type='text/css' href='/DHTML/jqplot/jquery.jqplot.css'>

来源：https://stackoverflow.com/questions/11960900/jqplot-y-axis-label-offset

标签

charts

jqplot

offset

overlap