利用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[]["Exploded"] = "true";
Titles:
图表的标题:
Title t = new Title("灰常好", Docking.Top, new System.Drawing.Font("Trebuchet MS", , System.Drawing.FontStyle.Bold), System.Drawing.Color.FromArgb(, , )); lineChart.Titles.Add(t);
其他属性:
1.ToolTip:
当鼠标放在图形上显示信息。
columnChart.Series["Column"].ToolTip = "人数:#VAL";
2.Border:
chartPie.BorderSkin.SkinStyle = BorderSkinStyle.Emboss;
chartPie.BorderlineColor = System.Drawing.Color.FromArgb(, , );
chartPie.BorderlineDashStyle = ChartDashStyle.Solid;
chartPie.BorderlineWidth = ;
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 == )//PAGE_LOAD里面传的二个参数,Series名字和索引
{
string[] seriesData = input[].Split(',');
Series s = this.chartPie.Series[seriesData[]];//获取点击的Series,Series集合命名空间:using System.Web.UI.DataVisualization.Charting;
//string m = s.Points[int.Parse(seriesData[1])].XValue.ToString();
string m = seriesData[].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"]), );
}
if (math.ContainsKey(Convert.ToDouble(dr["math"])))
{
math[Convert.ToDouble(dr["math"])]++;
}
else
{
math.Add(Convert.ToDouble(dr["math"]), );
}
if (english.ContainsKey(Convert.ToDouble(dr["english"])))
{
english[Convert.ToDouble(dr["english"])]++;
}
else
{
english.Add(Convert.ToDouble(dr["english"]), );
}
}
dr.Close();
bool flag = false;
int min = ;
int i = ;
for (i =; i < ; 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 = ;
lineChart.ChartAreas["ChartArea1"].AxisX.Interval = ;//设置每个刻度的跨度 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 = ; 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属性介绍