如何设置 jqplot 图表插件的轴和网格

春节即将到来, 这是节前的最后一篇, 来说明下 jqplot 的轴和网格的设置.

请到 Download 下载资源的 JQueryElement 示例下载一节下载示例代码, 目录 /plot/Default.aspx.

本文将详细的讲解如何设置 Plot 图表控件的轴和网格, 目录如下:

* 准备

* 轴

* 标题

* 刻度

* 两边的空白

* 边框

* X2, Y2

* 默认设置

* 网格

* 样式

* 阴影

* (这里是没有完成的章节)

准备

请先查看 http://code.google.com/p/zsharedcode/wiki/JQueryElementPlotDoc 或者准备一节的内容.

轴

标题

通过 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]]]" Width="500px">
    <AxesSetting
        YAxisSetting-Label='这里是 <b>y</b> 轴'
        YAxisSetting-LabelRendererSetting-EscapeHtml="true">
    </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 显示刻度.

还可以设置刻度的颜色和文本的格式:

<je:Plot ID="plot11" runat="server" IsVariable="true"
    Data="[[[100,1],[200,101],[20,50]]]">
    <AxesSetting>
        <XAxisSetting>
            <TickRendererSetting TextColor="Red"
                Prefix="-" FormatString="(%d)" />
        </XAxisSetting>
    </AxesSetting>
</je:Plot>

通过 Min 和 Max可以设置刻度的最小值和最大值:

<je:Plot ID="plot6" runat="server" IsVariable="true"
    Data="[[[2,5],[4,2],[3,7]]]">
    <AxesSetting>
        <XAxisSetting Min="0" Max="10">
        </XAxisSetting>
    </AxesSetting>
</je:Plot>

此外, 还可以设置刻度的样式和长度:

<je:Plot ID="plot10" runat="server" IsVariable="true"
    Data="[[[-1,1],[2,10],[20,50]]]">
    <AxesSetting>
        <XAxisSetting>
            <TickRendererSetting Mark="outside" MarkSize="20" />
        </XAxisSetting>
    </AxesSetting>
</je:Plot>

两边的空白

通过 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">
    </AxesSetting>
</je:Plot>

X2, Y2

除了 x 和 y 轴, 图表中还有 x2 和 y2 轴:

<je:Plot ID="plot12" runat="server" IsVariable="true"
    Data="[[[0,1],[2,4],[5,7]]]">
    <AxesSetting
        X2AxisSetting-BorderWidth="3"
        X2AxisSetting-BorderColor="Blue">
    </AxesSetting>
</je:Plot>

上面的代码设置了 x2 轴的颜色和宽度.

默认设置

可以为 x, y, x2, y2 这些轴设置默认的参数:

<je:Plot ID="plot13" runat="server" IsVariable="true"
    Data="[[[0,1],[2,4],[5,7]]]">
    <AxesDefaultsSetting
        BorderColor="Red"
        NumberTicks="3">
    </AxesDefaultsSetting>
</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>

JQueryElement 是开源共享的代码, 可以在 http://code.google.com/p/zsharedcode/wiki/Download 页面下载 dll 或者是源代码.

实际过程演示: http://www.tudou.com/programs/view/HZC250BM_TE/, 建议全屏观看.