如何設置 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/, 建議全屏觀看.