圖表ASP:Chart

ASP:Chart 屬性

 System.Web.UI.DataVisualization.Charting 命名空間包含用於圖表 Web 服務器控件的方法和屬性。

詳細了解Chart類http://msdn.microsoft.com/zh-cn/library/dd467201.aspx

要使用ASP：Chart 先執行下面3步

1、vs2008安裝MSChart_VisualStudioAddOn.exe，vs2010則安裝MSChart.exe　　點擊下載Chart.rar

2、vs2008 安裝MSChart_VisualStudioAddOn.exe后，工具箱里仍沒有Chart控件，這時要修改Web.Config 文件： 
　　①Add this under the controls tag (path: " <system.web> <pages> <controls>") : 

<add tagPrefix="asp" namespace="System.Web.UI.DataVisualization.Charting" assembly="System.Web.DataVisualization, Version=3.5.0.0, 　　　　Culture=neutral, PublicKeyToken=31bf3856ad364e35"/>

　　②And add this httpHandler (under " <httpHandlers>") : 

<add path="ChartImg.axd" verb="GET,HEAD" type="System.Web.UI.DataVisualization.Charting.ChartHttpHandler, System.Web.DataVisualization, Version=3.5.0.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35" validate="false"/> 

3.添加引用System.Web.DataVisualization.dll　　點擊下載System.Web.DataVisualization.rar

 

先大概了解一下各個屬性對應的圖標

　　以下列出ASP:Chart常用屬性設置項，一個簡單的例子

Chart　Chart 控件的根類

Name	Type	Description	Desfault
ID	string	獲取或設置該編程標識符分配給服務器控件。
Height	int	獲取或設置整個圖表圖像的高度（以像素為單位）。 備注：不能以%表示，必須是確定值
Width	int	獲取或設置整個圖表圖像的寬度（以像素為單位）。 備注：不能以%表示，必須是確定值
BackColor	string	獲取或設置 Chart 對象的背景色的基本色。
BorderColor	string	邊框顏色
BorderWidth	int	邊框粗細
BorderDashStyle	string	獲取或設置帶狀線的邊框樣式。線條可以是實線、虛線，或實線和虛線的某些變體。
BackGradientStyle	枚舉類  GradientStyle	獲取或設置 Chart 控件的背景漸變方向。 還確定是否使用漸變。 值：參考GradientStyle	None
BackSecondaryColor	Color	獲取或設置圖表背景的輔助顏色，將在應用漸變顏色時使用，或表示陰影線顏色。 值：任何有效的 ARGB（alpha、紅、綠、藍）值。	Empty
DataSource		獲取或設置 Chart 對象的數據源。
Palette	枚舉類  ChartColorPalette	獲取或設置 Chart 控件的調色板。 調色板用於在同時滿足以下兩個條件的情況下自動將顏色分配給數據元素： 1、數據點本身沒有指定的顏色。2.數據點所屬的數據系列也沒有指定的顏色。	None
PaletteCustomColors	Color[]	獲取或設置自定義調色板顏色的數組。 注：如果需要 16 種以上的顏色，或者想要將自己的顏色應用於圖表，則必須定義自定義調色板。 Palette設為None才起作用
ImageLocation	string	獲取或設置執行 ImageTag 呈現時，圖像文件的保存位置
ImageType	string	獲取或設置在使用 ImageTag 呈現時呈現圖表的圖像的類型。

 

 

 

 

 

 

 

 

注：

GradientStyle：None，LeftRight，TopBottom，Center，DiagonalLeft，DiagonalRight，HorizontalCenter，HorizontalCenter

ChartColorPalette：None，Bright，Grayscale(灰度顏色)，Excel，Light，Pastel(淺色)，EarthTones，SemiTransparent(透明色)，Berry，Chocolate，Fire，

SeaGreen。BrightPastel

 

Chart子元素

Titles　　表示整個圖表圖像的標題。

Name	Type	Description	Desfault
ForeColor	Color	獲取或設置標題文本的顏色。
Docking	枚舉類  Docking	獲取或設置一個決定標題停靠位置的值。
Font	Font	獲取或設置標題的字體。
Text	string	獲取或設置標題的文本。

 

 

 

 

 

                                                

Legends　　表示圖表圖像的圖例。

Name	Type	Description	Desfault
Docking	枚舉類  Docking	獲取或設置一個確定圖例停靠位置的值。 起作用條件：Position 屬性設置為 Auto	Right
Enabled	bool	獲取或設置一個確定圖例是否啟用的值。	true
Font	Font	獲取或設置用於設置圖例字體屬性的 Font 對象。
ForeColor	Color	獲取或設置圖例文本的顏色。
IsDockedInsideChartArea	bool	獲取或設置可指示圖例是停靠在圖表區域內還是其外的標志。 注：只有在將 DockedToChartArea 屬性設置為 ChartArea 對象的名稱，Position 屬性設置為 Auto的值的情況下，則此屬性才會有效	false
IsTextAutoFit	bool	獲取或設置一個標志標題文本是否自動調整大小。
LegendStyle	LegendStyle	獲取或設置圖例表樣式。	Table
Name	string	獲取或設置圖例的名稱。

 

 

 

 

 

 

 

 

LegendStyle :Column,Row,Table

Docking :Top,Right,Bottom,Left

Series　　存儲數據點和序列特性。

Name	Type	Description	Default
ChartType	ChartType	獲取或設置序列的圖表類型。
IsValueShownAsLabel	bool	獲取或設置一個標志，該標志指示是否在標簽上顯示數據點的值。	false
LabelFormat	string	獲取或設置數據點標簽的格式。
Name	string	獲取或設置 Series 對象的唯一名稱。
Points	DataPointCollection 對象	獲取 DataPointCollection 對象,（數據點集）
ToolTip	string	獲取或設置數據點的工具提示。
XValueMember	string	獲取或設置用於將數據綁定到系列的 X 值的圖表數據源成員列。(datasource中字段名)
YValueMembers	string	獲取或設置要用於將數據綁定到序列 Y 值的圖表數據源的成員列。(datasource中字段名)

 

ChartAreas　　表示圖表圖像上的圖表區域。

Name	Type	Descript	default
AxisX		獲取或設置表示主 X 軸的 Axis 對象。
AxisX2		獲取或設置表示輔助 X 軸的 Axis 對象。
AxisY		獲取或設置表示主 Y 軸的 Axis 對象。
AxisY2		獲取或設置表示輔助 Y 軸的 Axis 對象。
Name	string	獲取或設置 ChartArea 對象的唯一名稱。
AxisX.MajorGrid.Enabled	bool	設置圖標區域的網格是否可見	true

 

BorderSkin　　表示三維邊框外觀的繪制屬性。

Name	Type	Description	Default
SkinStyle	Color	獲取或設置邊框外觀的樣式。
BorderColor	BorderSkinStyle	獲取或設置邊框外觀框架的邊框顏色。	None

 

BorderSkinStyle ：None,Emboss(Sunken),Raised(凸起),Sunken(凹陷),FrameThin1...

例子：

.aspx前台代碼

<asp:Chart ID="ChartPeople" runat="server" Height="296px" Width="420px" ImageLocation="~/TempImages/ChartPic_#SEQ(300,3)"
                        ImageType="Png" BackColor="#FFFFFF" BorderDashStyle="Solid" Palette="BrightPastel" 
                        BackSecondaryColor="White" BackGradientStyle="TopBottom" BorderWidth="0" BorderColor="26, 59, 105" >
                        <Legends>
                            <asp:Legend Enabled="True" IsTextAutoFit="True" Name="Default" BackColor="Transparent"
                                Font="Trebuchet MS, 8.25pt, style=Bold">
                            </asp:Legend>
                        </Legends>
                        <BorderSkin SkinStyle="Emboss"></BorderSkin>
                        <Titles>
                            <asp:Title Font="微軟雅黑, 16pt" Name="Title1" Text="體檢人員分布柱狀圖"></asp:Title>
                        </Titles>
                        <Series>
                            <asp:Series Name="男" IsValueShownAsLabel="True" ChartType="Column" ToolTip="">
                            </asp:Series>
                            <asp:Series Name="女" IsValueShownAsLabel="True" ChartType="Column" ToolTip="">
                            </asp:Series>
                        </Series>
                        <ChartAreas>
                            <asp:ChartArea Name="ChartArea_People">
                                <AxisX><MajorGrid Enabled="false" /></AxisX>
                                <AxisY><MajorGrid Enabled="false" /></AxisY>
                            </asp:ChartArea>
                        </ChartAreas>
                    </asp:Chart>
                <asp:Chart ID="PiePeople" runat="server" Height="296px" Width="200px" ImageLocation="~/TempImages/ChartPic_#SEQ(300,3)"
                        ImageType="Png" BackColor="#FFFFFF" BorderDashStyle="Solid" Palette="BrightPastel"
                        BackSecondaryColor="White" BackGradientStyle="TopBottom" BorderWidth="0" BorderColor="26, 59, 105">
                        <Legends>
                            <asp:Legend Enabled="True" IsTextAutoFit="True" Name="Default" BackColor="Transparent"
                                Font="Trebuchet MS, 8.25pt, style=Bold" Docking="Bottom" LegendStyle="Column" >
                            </asp:Legend>
                        </Legends>
                        <BorderSkin SkinStyle="Emboss"></BorderSkin>
                        <Titles>
                            <asp:Title Font="微軟雅黑, 16pt" Name="Title2" Text="體檢人員分布餅圖"></asp:Title>
                        </Titles>
                        <Series>
                            <asp:Series Name="PiePeople" IsValueShownAsLabel="True" ChartType="Pie" ToolTip="" ></asp:Series>      
                        </Series>
                        <ChartAreas>
                            <asp:ChartArea Name="PieArea_People">
                                <AxisX><MajorGrid Enabled="false" /></AxisX>
                                <AxisY><MajorGrid Enabled="false" /></AxisY>
                            </asp:ChartArea>
                        </ChartAreas>
                    </asp:Chart>

.aspx.cs 后台代碼

        private void BindPeople(System.Data.DataTable dt)
        {
            string[] str = { "年齡段", "男性人數", "女性人數" };
            System.Data.DataTable mydt = dt.DefaultView.ToTable("tb",false,str);//取需要的三列
            DataRow[] mydrs = dt.DefaultView.ToTable("tb", false, str).Select("年齡段<>'合計'");//去掉合計部分
            ChartPeople.DataSource = mydrs;
            ChartPeople.Series["男"].XValueMember = "年齡段";
            ChartPeople.Series["男"].YValueMembers = "男性人數";
            ChartPeople.Series["女"].XValueMember = "年齡段";
            ChartPeople.Series["女"].YValueMembers = "女性人數";
            ChartPeople.ChartAreas["ChartArea_People"].AxisY.Title = "人數(人)";//Y軸單位
            ChartPeople.ChartAreas["ChartArea_People"].AxisY.TitleAlignment = StringAlignment.Far; //設置Y軸標題的名稱所在位置位遠
            ChartPeople.DataBind();//綁定數據
            PiePeople.Series["PiePeople"].Points.AddXY("男", double.Parse(dt.Rows[dt.Rows.Count - 1]["男性比例"].ToString()));
            PiePeople.Series["PiePeople"].Points.AddXY("女", double.Parse(dt.Rows[dt.Rows.Count - 1]["女性比例"].ToString()));
            PiePeople.ToolTip = "百分比(%)";
            PiePeople.Series["PiePeople"].LabelFormat = "{0.00}%";
        }

最終效果：

 

注意：

如果 Chart 和 Series 對象的 Palette 屬性都設置為 None，且沒有向相關的數據系列或數據點分配任何顏色，則不繪制數據點，數據點將顯示為“空”區域。