JQPlot 是一个强大的、基于 jQuery 的图表库,它提供了丰富的图表类型和灵活的配置选项。本文将详细介绍如何设置 JQPlot 图表的轴和网格,包括轴标题、刻度、填充、边框和网格样式等。
在开始之前,请确保已经阅读了jqplot图表基本属性介绍
部分。这将帮助更好地理解图表的基本结构和属性。
可以通过设置轴的Title
属性来定义轴的标题。例如:
<je:Plot ID="plot1" runat="server" IsVariable="true" Width="500px">
<AxesSetting>
<XAxisSetting Label='<span style="font-size: xx-large">x</span>'>
</XAxisSetting>
</AxesSetting>
<DataSetting>
<je:Data>
<je:Point Param1="10" Param2="1"/>
<je:Point Param1="11" Param2="10"/>
<je:Point Param1="13" Param2="22"/>
<je:Point Param1="20" Param2="30"/>
</je:Data>
</DataSetting>
</je:Plot>
如果想将HTML代码作为文本显示,需要设置EscapeHtml
属性为true
:
<je:Plot ID="plot2" runat="server" IsVariable="true" Data="[[[1,1],[2,2]]]">
<AxesSetting>
<YAxisSetting-Label=<b>y</b> YAxisSetting-LabelRendererSetting-EscapeHtml="true">
</YAxisSetting>
</AxesSetting>
</je:Plot>
可以通过NumberTicks
和TickInterval
属性设置刻度之间的距离:
<je:Plot ID="plot3" runat="server" IsVariable="true" Data="[[[1,1],[2,2],[3,3],[4,4],[5,5],[6,6],[7,7]]]">
<AxesSetting>
<XAxisSetting NumberTicks="4" TickInterval="3">
</XAxisSetting>
</AxesSetting>
</je:Plot>
还可以通过Ticks
属性设置显示刻度的位置:
<je:Plot ID="plot8" runat="server" IsVariable="true" Data="[[[0,1],[2,5],[3,7]]]">
<AxesSetting>
<XAxisSetting Ticks="[0,1,3,5,10]">
</XAxisSetting>
</AxesSetting>
</je:Plot>
在上述代码中,将在0, 1, 3, 5, 10的位置显示刻度。
通过Pad
、PadMax
和PadMin
属性,可以设置填充的百分比:
<je:Plot ID="plot4" runat="server" IsVariable="true" Data="[[[2,1],[2,2],[3,7]]]">
<AxesSetting>
<XAxisSetting Pad="2">
</XAxisSetting>
</AxesSetting>
</je:Plot>
<je:Plot ID="plot5" runat="server" IsVariable="true" Data="[[[2,1],[2,2],[3,7]]]">
<AxesSetting>
<XAxisSetting PadMax="2">
</XAxisSetting>
</AxesSetting>
</je:Plot>
通过BorderColor
和BorderWidth
属性,可以设置边框的样式:
<je:Plot ID="plot9" runat="server" IsVariable="true" Data="[[[-10,1],[20,10],[20,20]]]">
<AxesSetting>
<XAxisSetting-BorderColor="Blue" XAxisSetting-BorderWidth="3">
</XAxisSetting>
</AxesSetting>
</je:Plot>
可以设置网格线的颜色和宽度:
<je:Plot ID="plot2" runat="server" IsVariable="true" Data="[[[0,0],[1,4],[2,4]]]">
<GridSetting Background="DarkGray" BorderColor="Red" BorderWidth="5" GridLineColor="Blue" GridLineWidth="2"/>
</je:Plot>
<je:Plot ID="plot3" runat="server" IsVariable="true" Data="[[[1,10],[12,43],[22,4]]]">
<GridSetting ShadowDepth="5" ShadowWidth="6" ShadowAngle="60" ShadowOffset="2"/>
</je:Plot>