JQPlot Y轴标签偏移 [英] JQPlot Y-Axis Label Offset

问题描述

我的JQPlot图表当前可以正确呈现所有内容，但是唯一的问题是刻度标签被图表覆盖.无论如何，我可以抵消标签以防止这种情况发生或简单的选项更改吗?我没有在JQPlot网站上找到任何有关此的信息，因此我们将不胜感激.这是一些示例代码:

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'
                            }

推荐答案

您可以通过修改CSS来实现.

You can do this by modifying the CSS.

jqPlot目录中有两个文件:jquery.jqplot.css和jquery.jqplot.min.css

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

Inside是y轴标签的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.

请记住确保链接到HTML文档开头的以下文件之一，例如:

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'>

这篇关于JQPlot Y轴标签偏移的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！