The original post can be found at http://zoyobar.blogspot.com/2012/01/introduction-to-title-legend-and-series.html.
Introduction/Catalog
Please download the sample code at the section JQueryElement demo download of Download JQueryElement, the directory is /plot/Default.aspx.
Due to limited time, synchronization cannot be guaranteed in more than one blog article, at the following address, you can view up-to-date content, hope you understand:
This article will explain in detail how to set the title, legend and series of the Plot control, the catalog is as follows:
- Prepare
- Title
- Legend
- Location
- Text
- Series
- Line
- Axis
- Fill
- Shadow
- Legend Text
- Default Setting
- (Here are no completed chapters.)
Prepare
Please view the Prepare section at Introduction To Basic Properties Of jqplot Chart.
Title
You can set the title of chart through the TitleSetting property:
<je:Plot ID="plot1" runat="server" IsVariable="true"
Data="[[[1,2],[3,4]]]">
<TitleSetting
Text="Here is a title"
TextAlign="right"
TextColor="Blue"
FontSize="10pt" />
</je:Plot>
The Text property is the text of title, the TextAlign property is the alignment of the title, the TextColor property is the color of the title, and the FontSize property is the size of the font.
Legend
Location
You can set the display position of the legend by the Location and Placement properties of the LegendSetting:
<je:Plot ID="plot1" runat="server" IsVariable="true"
Data="[[[1,2],[3,4]]]">
<LegendSetting
Show="true"
Location="sw"
Placement="outsideGrid" />
</je:Plot>
Text
You can set the text of the legend through the Labels property, in the form of a JavaScript array, each element corresponds to the legend text of a series, defaults to Series N:
<je:Plot ID="plot2" runat="server" IsVariable="true"
Data="[[[1,2],[3,4]],[[3,2],[3,1]]]">
<LegendSetting Show="true"
Labels="['line 1','<u>line 2</u>']" />
</je:Plot>
Set EscapeHtml property to true, the HTML code will be displayed as text:
<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="['line 1','<u>line 2</u>']"
EscapeHtml="true" />
</je:Plot>
Series
You can set each series with SeriesSetting.
Line
You can add a Series object to increase a set of 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>
In the above code, we set the color of the first series to green, the width to 5 pixels, and the style to dashed line.
Axis
By XAxis and YAxis, you can set the axis that the series used:
<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
Set Fill to true, it'll fill the empty space between lines and a tick:
<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>
By FillAlpha and FillColor, you can set the fill color and transparency, set FillAndStroke to true, it'll show the line:
<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>
Set FillToZero property to true, it'll use 0 as baseline:
<je:Plot ID="plot5" runat="server" IsVariable="true"
Data="[[[-1,-1],[2,0],[5,3]]]">
<SeriesSetting>
<je:Series Fill="true"
FillToZero="true">
</je:Series>
</SeriesSetting>
</je:Plot>
Shadow
You can also set the shadow setting:
<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>
Legend Text
Label property indicates the legend text of series:
<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>
Default Setting
Set the default setting of all series with 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>
(Here are no completed chapters.)
More content, so stay tuned...
Related Content
Comment
