如何设置 jqplot 图表插件的标题图例和直线

好, 我想大部分朋友都已经有回到了让人痛苦的办公桌上, 给大家带来我攒好的一篇文章, 关于 jqplot 的标题, 图例和直线的设置.

本文将详细的讲解如何设置 Plot 图表的标题, 图例和序列, 目录如下:

  * 准备

  * 标题

  * 图例

    * 位置

    * 文本

  * 序列

    * 直线

    * 轴

    * 填充

    * 阴影

    * 图例文本

    * 默认设置

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

准备

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

标题

通过 TitleSetting属性可以设置图表的标题:

<je:Plot ID="plot1" runat="server" IsVariable="true"
    Data="[[[1,2],[3,4]]]">
    <TitleSetting
        Text="这里是一个标题"
        TextAlign="right"
        TextColor="Blue"
        FontSize="10pt" />
</je:Plot>

Text 是标题的文本, TextAlign 是标题的对齐方式, TextColor 是标题的颜色, 而 FontSize 是字体的大小.

图例

位置

通过 LegendSetting 的 Location 和 Placement属性可以设置图例的显示位置:

<je:Plot ID="plot1" runat="server" IsVariable="true"
    Data="[[[1,2],[3,4]]]">
    <LegendSetting
        Show="true"
        Location="sw"
        Placement="outsideGrid" />
</je:Plot>

文本

通过 Labels 属性可以设置图例的文本, 形式为一个 javascript 数组, 每一个元素对应一个序列的图例文本, 默认为 Series N:

<je:Plot ID="plot2" runat="server" IsVariable="true"
    Data="[[[1,2],[3,4]],[[3,2],[3,1]]]">
    <LegendSetting Show="true"
        Labels="['直线 1','<u>直线 2</u>']" />
</je:Plot>

设置 EscapeHtml 属性为 true, 则 html代码将显示为文本:

<je:Plot ID="plot3" runat="server" IsVariable="true"
    Data="[[[1,2],[3,4]],[[3,2],[3,1]],[[5,0],[7,9]]]">
    <LegendSetting Show="true"
        Labels="['直线 1','<u>直线 2</u>']"
        EscapeHtml="true" />
</je:Plot>

序列

通过 SeriesSetting 可以设置每一个序列.

直线

添加 Series对象, 可以增加对序列的设置:

<je:Plot ID="plot1" runat="server" IsVariable="true"
    Data="[[[1,2],[3,4]]]">
    <SeriesSetting>
        <je:Series
            Color="Green"
            LineWidth="5"
            LinePattern="dashed">
        </je:Series>
    </SeriesSetting>
</je:Plot>

在上面代码中, 设置第一个序列的颜色为绿色, 宽度为 5 像素, 样式为虚线.

轴

通过 XAxis 和 YAxis 可以设置序列所使用轴:

<je:Plot ID="plot2" runat="server" IsVariable="true"
    Data="[[[1,2],[3,4]]]">
    <SeriesSetting>
        <je:Series XAxis="x2axis" YAxis="y2axis">
        </je:Series>
    </SeriesSetting>
</je:Plot>

填充

设置 Fill 为 true, 将填充直线和某个刻度之间的空白:

<je:Plot ID="plot3" runat="server" IsVariable="true"
    Data="[[[2,2],[3,5],[5,3]]]">
    <SeriesSetting>
        <je:Series Fill="true">
        </je:Series>
    </SeriesSetting>
</je:Plot>

通过 FillAlpha 和 FillColor 可以设置填充的透明度和颜色, 设置 FillAndStroke为 true, 则将在显示填充的同时显示直线:

<je:Plot ID="plot4" runat="server" IsVariable="true"
    Data="[[[-1,-1],[3,0],[4,3]]]">
    <SeriesSetting>
        <je:Series Fill="true"
            FillAlpha="0.4"
            FillColor="Red"
            FillAndStroke="true">
        </je:Series>
    </SeriesSetting>
</je:Plot>

设置 FillToZero 为 true, 则填充以 0 为基线:

阴影

同样可是设置序列的阴影:

<je:Plot ID="plot6" runat="server" IsVariable="true"
    Data="[[[1,1],[2,3],[5,3]]]">
    <SeriesSetting>
        <je:Series
            ShadowAngle="30"
            ShadowDepth="10"
            ShadowOffset="3">
        </je:Series>
    </SeriesSetting>
</je:Plot>

图例文本

Label属性表示序列在图例中的文本:

<je:Plot ID="plot7" runat="server" IsVariable="true"
    Data="[[[1,2],[2,4],[3,3]]]" LegendSetting-Show="true">
    <SeriesSetting>
        <je:Series Label="Hello!!!">
        </je:Series>
    </SeriesSetting>
</je:Plot>

默认设置

通过 SeriesDefaultsSetting可以设置所有的序列:

<je:Plot ID="plot8" runat="server" IsVariable="true"
    Data="[[[1,3],[2,1],[3,5]],[[1,1],[2,0],[3,3]]]">
    <SeriesDefaultsSetting LineWidth="8">
    </SeriesDefaultsSetting>
</je:Plot>

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

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

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