MS Chart 學習心得

利用Chart控件對學生信息進行統計，最終結果以下：

 

Chart圖形控件主要由如下幾個部份組成：

1.Annotations --圖形註解集合
2.ChartAreas  --圖表區域集合
3.Legends      --圖例集合
4.Series　　  --圖表序列集合（即圖表數據對象集合）
5.Titles　　　--圖標的標題集合

Annotations :

Annotations是一個對圖形的一些註解對象的集合，所謂註解對象，相似於對某個點的詳細或者批註的說明，好比，在圖片上實現各個節點的關鍵信息，以下圖方框和黃色的小方框：

一個圖形上能夠擁有多個註解對象，能夠添加十多種圖形樣式的註解對象，包括常見的箭頭、雲朵、矩行、圖片等等註解符號，經過各個註解對象的屬性，能夠方便的設置註解對象的放置位置、呈現的顏色、大小、文字內容樣式等常見的屬性。

ChartAreas:

ChartAreas是一個Chart的繪圖區，若是要在一個Chart控件上顯示多張不一樣的圖，則創建多個不一樣的ChartArea。

chartPie.ChartAreas.Add("ChartArea1");

chartPie.ChartAreas.Add("ChartArea2");

chartPie.ChartAreas.Add("ChartArea3");

對於每個ChartArea，能夠設置其x,y軸的屬性：

columnChart.ChartAreas["ChartArea1"].AxisX.Title = "年齡";
columnChart.ChartAreas["ChartArea1"].AxisX.TextOrientation = TextOrientation.Horizontal;
columnChart.ChartAreas["ChartArea1"].AxisX.TitleAlignment = StringAlignment.Far;//命名空間System.Drawing

　//lineChart.ChartAreas["ChartArea1"].AxisY.Maximum = 1;//設置Y軸最大值
　lineChart.ChartAreas["ChartArea1"].AxisX.Minimum = min;//是在Y軸最小值
　lineChart.ChartAreas["ChartArea1"].AxisX.Maximum = 100;
　lineChart.ChartAreas["ChartArea1"].AxisX.Interval = 5;//設置每一個刻度的跨度

開啓3D效果:

lineChart.ChartAreas["ChartArea1"].Area3DStyle.Enable3D = true;  

Legends:

　　legends是一個圖例的集合，能夠當作是對圖中數據集合的註解，當數據較多時利用legend可分清數據指代：

 

　　

chartPie.Legends.Add("Legend1");//實現圖標註解

Series：

　　圖表序列，應該是整個繪圖中最關鍵的內容了，通俗點說，便是實際的繪圖數據區域，實際呈現的圖形形狀，就是由此集合中的每個圖表來構成的，能夠往集合裏面添加多個圖表，每個圖表能夠有本身的繪製形狀、樣式、獨立的數據。

　　須要注意的是，每個圖表，你能夠指定它的繪製區域（見ChartAreas的說明），讓此圖表呈如今某個繪圖區域，也可讓幾個圖表在同一個繪圖區域疊加，以下圖：

 

　　上面兩幅圖，分別表示了把多個Series放在不一樣的ChartAreas和放在同一個ChartArea的狀況。

　　添加數據進series：

第一種：

string[] xValues = { "male", "female" };
int[] yValues = { male, female };
chartPie.Series["Pie"].Points.DataBindXY(xValues, yValues);
chartPie.Series["Pie"]["PieLabelStyle"] = "Inside";

第二種：

lineChart.Series["Series1"].Points.AddXY(XVaule,YValues);

餅狀圖中實現某一塊分離：

chartPie.Series["Pie"].Points[1]["Exploded"] = "true";

 

Titles：

圖表的標題:

Title t = new Title("灰常好", Docking.Top, new System.Drawing.Font("Trebuchet MS", 14, System.Drawing.FontStyle.Bold), System.Drawing.Color.FromArgb(26, 59, 105));   lineChart.Titles.Add(t);  

其餘屬性：

1.ToolTip：

　　當鼠標放在圖形上顯示信息。

columnChart.Series["Column"].ToolTip = "人數：#VAL";

2.Border：

chartPie.BorderSkin.SkinStyle = BorderSkinStyle.Emboss;
chartPie.BorderlineColor = System.Drawing.Color.FromArgb(26, 59, 105);        
chartPie.BorderlineDashStyle = ChartDashStyle.Solid;
chartPie.BorderlineWidth = 2;

3.Label：

　　Label即標籤的含義，能夠在圖片的關鍵位置進行一些關鍵數字或文字的描述，以下圖：

　　像上圖：X軸和Y軸的文字即是標籤，以及圖表曲線中的紅點上的文字，也是標籤，添加了標籤，可讓人更容易的對內容進行理解。

 

chart還有許多類型：

若是你想用那個下面爲你提供了一個選擇。

	成員名稱	說明
	Point	點圖類型。
	FastPoint	快速點圖類型。
	Bubble	氣泡圖類型。
	Line	折線圖類型。
	Spline	樣條圖類型。
	StepLine	階梯線圖類型。
	FastLine	快速掃描線圖類型。
	Bar	條形圖類型。
	StackedBar	堆積條形圖類型。
	StackedBar100	百分比堆積條形圖類型。
	Column	柱形圖類型。
	StackedColumn	堆積柱形圖類型。
	StackedColumn100	百分比堆積柱形圖類型。
	Area	面積圖類型。
	SplineArea	樣條面積圖類型。
	StackedArea	堆積面積圖類型。
	StackedArea100	百分比堆積面積圖類型。
	Pie	餅圖類型。
	Doughnut	圓環圖類型。
	Stock	股價圖類型。
	Candlestick	K 線圖類型。
	Range	範圍圖類型。
	SplineRange	樣條範圍圖類型。
	RangeBar	範圍條形圖類型。
	RangeColumn	範圍柱形圖類型。
	Radar	雷達圖類型。
	Polar	極座標圖類型。
	ErrorBar	偏差條形圖類型。
	BoxPlot	盒須圖類型。
	Renko	磚形圖類型。
	ThreeLineBreak	新三值圖類型。
	Kagi	卡吉圖類型。
	PointAndFigure	點數圖類型。
	Funnel	漏斗圖類型。
	Pyramid	棱錐圖類型。

 

Click Event：

當點擊餅狀圖或柱狀圖中的某一部分數據時，將彈出Gridview顯示對應索引的數據：

protected void chartPie_Click(object sender, ImageMapEventArgs e)
    {
        GridView1.Visible = true;
        string[] input = e.PostBackValue.Split(':');
        if (input.Length == 2)//PAGE_LOAD裏面傳的二個參數,Series名字和索引
        {
            string[] seriesData = input[1].Split(',');
            Series s = this.chartPie.Series[seriesData[0]];//獲取點擊的Series,Series集合命名空間：using System.Web.UI.DataVisualization.Charting;
            //string m = s.Points[int.Parse(seriesData[1])].XValue.ToString();
            string m = seriesData[1].ToString();
            string sql = "select * from users where Sex = '" + m + "'";
            DataTable dt = DBHelper.GetDataSet(sql);
            GridView1.DataSource = dt;
            GridView1.DataBind();
        }
    }

在Page_Load里加以下代碼：

this.chartPie.Click += new ImageMapEventHandler(chartPie_Click);
foreach (Series series in this.chartPie.Series)
　　{
      　　series.PostBackValue = "Column:" + series.Name + ",#VALX";
　　}

頁首第三個圖的代碼：

 

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Data.SqlClient;
using System.Data;
using System.Web.UI.DataVisualization.Charting;

public partial class chartLine : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {
        string sql = "select * from users";
        Dictionary<double, int> chinese = new Dictionary<double, int>();
        Dictionary<double, int> math = new Dictionary<double, int>();
        Dictionary<double, int> english = new Dictionary<double, int>();
        SqlDataReader dr = DBHelper.GetReader(sql);
        while (dr.Read())
        {
            if (chinese.ContainsKey(Convert.ToDouble(dr["chinese"])))
            {
                chinese[Convert.ToDouble(dr["chinese"])]++;
            }
            else
            {
                chinese.Add(Convert.ToDouble(dr["chinese"]), 1);
            }
            if (math.ContainsKey(Convert.ToDouble(dr["math"])))
            {
                math[Convert.ToDouble(dr["math"])]++;
            }
            else
            {
                math.Add(Convert.ToDouble(dr["math"]), 1);
            }
            if (english.ContainsKey(Convert.ToDouble(dr["english"])))
            {
                english[Convert.ToDouble(dr["english"])]++;
            }
            else
            {
                english.Add(Convert.ToDouble(dr["english"]), 1);
            }
        }
        dr.Close();
        bool flag = false;
        int min = 0;
        int i = 0;
        for (i =0; i < 100; i++)
        {
            if (chinese.ContainsKey(Convert.ToDouble(i)))
            {
                lineChart.Series["Chinese"].Points.AddXY(Convert.ToDouble(i),chinese[Convert.ToDouble(i)]);
                flag = true;
            }
            if (math.ContainsKey(Convert.ToDouble(i)))
            {
                lineChart.Series["Math"].Points.AddXY(Convert.ToDouble(i), math[Convert.ToDouble(i)]);
                flag = true;
            }
            if (english.ContainsKey(Convert.ToDouble(i)))
            {
                lineChart.Series["English"].Points.AddXY(Convert.ToDouble(i), english[Convert.ToDouble(i)]);
                flag = true;
            }
            if (!flag)
            {
                min = i;
            }

        }
        //lineChart.ChartAreas["ChartArea1"].AxisY.Maximum = 1;//設置Y軸最大值
        lineChart.ChartAreas["ChartArea1"].AxisX.Minimum = min;//是在Y軸最小值
        lineChart.ChartAreas["ChartArea1"].AxisX.Maximum = 100;
        lineChart.ChartAreas["ChartArea1"].AxisX.Interval = 5;//設置每一個刻度的跨度
        
        lineChart.Legends.Add("Legend1");

        lineChart.ChartAreas["ChartArea1"].Area3DStyle.Enable3D = true;

        //給圖表添加標題
        Title title = new Title();
        title.Text = "學生成績分析表";
        lineChart.Titles.Add(title);

        //修改圖例名稱
        lineChart.Series["Chinese"].LegendText = "語文";
        lineChart.Series["Math"].LegendText = "數學";
        lineChart.Series["English"].LegendText = "英語";

        //設置每一個數據點標籤顯示在圖表上
        lineChart.Series["Math"].Label = "#VAL";

        //爲每一個數據點添加提示信息，同PreRender函數
        lineChart.Series["Math"].ToolTip = "#VALX" + "," + "#VAL";

    }
    protected void lineChart_PreRender(object sender, EventArgs e)
    {
        //爲每一個點添加提示信息
        for (int i = 0; i < lineChart.Series["Chinese"].Points.Count; i++)
        {
            lineChart.Series["Chinese"].Points[i].ToolTip = "#VAL" + "," + "#VALX";
        }

    }
}

 

學習中大體參考如下連接：

Chart基本介紹

http://blog.csdn.net/lzq7419/article/details/7693491

Chart的多種用法

http://blog.csdn.net/freeman127/article/details/4437268

http://blog.csdn.net/freeman127/article/details/4437461

Chart屬性介紹

http://blog.csdn.net/zfyong/article/details/6049566