如何設置 jqplot 圖表插件所需的數據和幾個屬性介紹

經過半個月的煎熬, 終於將是做好了 jqplot 服務器端控件的雛形, 大家先睹為快吧.

請到 Download 下載資源 的 JQueryElement 示例下載一節下載示例代碼, 目錄 /plot/Default.aspx.

由於精力有限, 不能在多個博客中保證文章的同步, 可在如下地址查看最新內容, 請諒解:

http://code.google.com/p/zsharedcode/wiki/JQueryElementPlotDoc

本文將初步的講解如何設置 Plot 控件所使用的數據以及控件的部分屬性, 目錄如下:

  * 准備

  * 設置數據

    * 數據序列

    * DataSetting

    * AppendData 方法

    * Data 屬性

  * 顯示數據

  * 播放動畫

  * 數據排序

  * (這里是沒有完成的章節)

准備

請確保已經在 Download 下載資源 中下載 JQueryElement 最新的版本.

請使用指令引用如下的命名空間:

<%@ Register Assembly="zoyobar.shared.panzer.JQueryElement"
    Namespace="zoyobar.shared.panzer.ui.jqueryui.plusin.jqplot"
    TagPrefix="je" %>
<%@ Register Assembly="zoyobar.shared.panzer.JQueryElement"
    Namespace="zoyobar.shared.panzer.web.jqueryui.plusin.jqplot"
    TagPrefix="je" %>
<%@ Register Assembly="zoyobar.shared.panzer.JQueryElement"
    Namespace="zoyobar.shared.panzer.web.jqueryui"
    TagPrefix="je" %>

除了命名空間, 還需要引用 jQueryUI 和 jqplot 的腳本和樣式, 在 Download 下載資源 的 JQueryElement.dll 下載一節下載的壓縮包中包含了一個自定義樣式的 jQueryUI 和 jqplot, 如果需要更多樣式, 可以在 http://jqueryui.com/download 下載:

<link type="text/css" rel="stylesheet" href="[樣式路徑]/jquery-ui-<version>.custom.css" />
<link rel="stylesheet" type="text/css" href="[樣式路徑]/jquery.jqplot.min.css" />
<script type="text/javascript" src="[腳本路徑]/jquery-<version>.min.js"></script>
<script type="text/javascript" src="[腳本路徑]/jquery-ui-<version>.custom.min.js"></script>
<script type="text/javascript" src="[腳本路徑]/jquery.jqplot.min.js"></script>

 

設置數據

數據序列

Plot 可以顯示多組數據, 比如, 同時顯示兩本圖書各自的月銷量, 每一本書相關的數據就是一個數據序列.

DataSetting

通過 Plot 的 DataSetting, 可以添加數據:

<je:Plot ID="plot2" runat="server" IsVariable="true" Width="500px">
    <DataSetting>
        <je:Data>
            <je:Point Param1="1" Param2="2" />
            <je:Point Param1="2" Param2="4" />
            <je:Point Param1="3" Param2="8" />
            <je:Point Param1="4" Param2="16" />
        </je:Data>
        <je:Data>
            <je:Point Param1="1" Param2="3" />
            <je:Point Param1="2" Param2="7" />
            <je:Point Param1="3" Param2="10" />
            <je:Point Param1="4" Param2="6" />
        </je:Data>
    </DataSetting>
</je:Plot>

上面的代碼中, 添加了 2 個序列, 每一個 Data 對象對應了一個序列. 通過添加 Point, 可以為序列增加點, Param1 屬性對應點的第一個參數, 通常也就是 x 坐標, Param2 屬性對應了第二個參數, 通常是 y 坐標. 在某些特殊情況下, 還會用到 Param3 和 Param4.

AppendData 方法

在后台代碼中, 可以通過 AppendData方法來添加數據序列:

protected void Page_Load ( object sender, EventArgs e )
{
    this.plot3.AppendData (
        new Data (
            new Point ( 1, 1 ),
            new Point ( 2, 2 ),
            new Point ( 3, 3 )
            ),
        new Data (
            new Point ( 1, 3 ),
            new Point ( 2, 2 ),
            new Point ( 3, 1 )
            )
        );
}

在頁面載入時, 為 plot3 添加了 2 個序列, 和 DataSetting 的結構類似, Data 對象表示一個序列, 而 Point 對象表示點.

Data 屬性

此外可以通過 Plot 的 Data屬性來設置序列:

<je:Plot ID="plot6" runat="server" IsVariable="true"
    Data="[[[2,5],[4,6]],[[2,6],[4,7]]]">
</je:Plot>

Data 屬性的格式為 [<序列, 比如: [<點, 比如: [x, y]>]>].

顯示數據

有了數據之后, 可以通過 fill 方法在 plot中顯示數據:

<script type="text/javascript">
    $(function () {
        plot1.__plot('fill');
    });
</script>

上面的代碼中, 在頁面載入完成后, 顯示數據. 其中 plot1 是通過 Plot 的 IsVariable 屬性生成的 javascript 變量, 具體可以參考 http://code.google.com/p/zsharedcode/wiki/JEBase.

播放動畫

設置 Plot 的 Animate屬性為 true, 則在顯示數據時將播放動畫:

<span class="span-button" onclick="plot8.__plot('fill');">播放動畫</span>
<je:Plot ID="plot8" runat="server" IsVariable="true"
    Data="[[[1,1],[3,5],[2,6],[4,7]]]"
    Animate="true">
</je:Plot>

數據排序

在默認的情況下, plot 會對數據進行排序, 可以將 SortData屬性設置為 false 來阻止排序, 比如:

<je:Plot ID="plot7" runat="server" IsVariable="true"
    Data="[[[1,1],[3,5],[2,6],[4,7]]]"
    SortData="false">
</je:Plot>

<je:Plot ID="plot8" runat="server" IsVariable="true"
    Data="[[[1,1],[3,5],[2,6],[4,7]]]">
</je:Plot>

在 plot7 中, 第 2 個點 [3,5] 和第 3 個點 [2,6] 會交換順序, 而在 plot8 中不會.

 

 

JQueryElement 是開源共享的代碼, 可以在 http://code.google.com/p/zsharedcode/wiki/Download 頁面下載 dll 或者是源代碼.

實際過程演示: http://www.tudou.com/programs/view/mkuQaMpuBvE/, 建議全屏觀看.