好, 我想大部分朋友都已經有回到了讓人痛苦的辦公桌上, 給大家帶來我攢好的一篇文章, 關于 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/, 建議全屏觀看.

轉載于:https://www.cnblogs.com/zoyobar/archive/2012/01/29/Plot3.html

創作挑戰賽新人創作獎勵來咯，堅持創作打卡瓜分現金大獎

總結

以上是生活随笔為你收集整理的如何设置 jqplot 图表插件的标题图例和直线的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。