RSS订阅ASP.NET微软MsChart图表实例之绑定数据源和方法属性介绍
本例以科室计算机分布图为演示，介绍ASP.NET中如何使用MsChart图表展现数据，如何绑定数据源(连接数据库)和基本的MsChart图表使用方法
开发环境 VS2010
新建mschart.aspx页面，在工具箱-数据栏中拖放一个chart图表控件
代码如下
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="mschart.aspx.cs" Inherits="demo_mschart" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title></title> </head> <body> <form id="form1" runat="server"> <div> <asp:Chart ID="Chart1" runat="server" EnableViewState="True"> <Series> <asp:Series Name="Series1" > </asp:Series> </Series> <Legends> <asp:Legend Alignment="Center" Docking="Bottom" Name="Legend1" Title="图例"> </asp:Legend> </Legends> <ChartAreas> <asp:ChartArea Name="ChartArea1"> </asp:ChartArea> </ChartAreas> </asp:Chart> </div> </form> </body> </html>
其中<Legends></Legends>标签对中的图例，默认是没有的，需要手动添加
ChartAreas表示图表绘图区域，Series表示最终看到的饼图、柱状图、线图、点图等构成的集合，可以将多种相互兼容的类型放在一个绘图区域内，形成复合图。
数据源绑定
public DataSet GetDataSet(string sql)
{
DataSet ds = new DataSet();
SqlConnection sqlconstr = new SqlConnection();
sqlconstr.ConnectionString = "server=serverIP;database=databaseName;uid=username;pwd='password'";
SqlCommand cmd = sqlconstr.CreateCommand();
cmd.CommandType = CommandType.Text;
cmd.CommandText = sql;
try
{
SqlDataAdapter sda = new SqlDataAdapter(cmd);
sda.Fill(ds);
}
catch (Exception e)
{
Response.Write(e);
}
sqlconstr.Close();
return ds;
}其中数据库连接语句sqlconstr.ConnectionString="server=serverIP;database=databaseName;uid=username;pwd=' password' ";需要把serverIP,databaseName,username,password替换为用户自己的数据库IP地址、数据库名称、登录数据库用户名、密码。
设置坐标轴名称
Chart1.ChartAreas[0].AxisX.Title = "分布位置";//设置坐标轴名称 Chart1.ChartAreas[0].AxisY.Title = "数量";
坐标轴字体颜色
Chart1.ChartAreas[0].AxisX.TitleForeColor = Color.Blue;//设置坐标轴字体颜色 Chart1.ChartAreas[0].AxisY.TitleForeColor = Color.Blue;
隐藏辅助线(图表默认有辅助线)
Chart1.ChartAreas[0].AxisX.MajorGrid.Enabled = false;//隐藏主要辅助线-X轴方向上的 Chart1.ChartAreas[0].AxisY.MajorGrid.Enabled = false;//隐藏主要辅助线-Y轴方向上的
设置图表区域尺寸和图表样式
Chart1.Width=600;//设置图表区域尺寸 Chart1.Height=400; Chart1.Series[0].ChartType = SeriesChartType.Column;//设置图表样式，此处为柱状图
图表上直接显示数据和鼠标移动到图表上显示数据
Chart1.Series[0].ToolTip = "百分比" + "#PERCENT";//鼠标移动显示数据 Chart1.Series[0].IsValueShownAsLabel =true;//直接显示各项数据 Chart1.Series[0].Label = "#VALY" + "/" + "#TOTAL" + "#LEGENDTEXT";//直接显示各项数据
MsChart的Label的值的转义字符
#VALX 显示当前图例的X轴的对应文本(或数据) #VAL, #VALY, 显示当前图例的Y轴的对应文本(或数据) #VALY2, #VALY3, 显示当前图例的辅助Y轴的对应文本(或数据) #SER: 显示当前图例的名称 #LABEL 显示当前图例的标签文本 #INDEX 显示当前图例的索引 #PERCENT 显示当前图例的所占的百分比 #TOTAL 总数量 #LEGENDTEXT 图例文本
图表字体大小样式设置
Chart1.Titles[0].Font = new System.Drawing.Font("宋体", 12f);//设置图表标题字体样式和大小图例停靠图表区域位置(顶部、底部、左侧、右侧)
Chart1.Legends["Legend1"].Docking = System.Web.UI.DataVisualization.Charting.Docking.Right;
完整功能代码mschart.aspx.cs
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Data;
using System.Data.SqlClient;
using System.Drawing;
using System.Text;
using System.ComponentModel;
using System.Web.UI.DataVisualization.Charting;
public partial class demo_mschart : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
//动态添加图表标题
Chart1.Titles.Add("科室计算机分布图表");//设置图表名称
Chart1.ChartAreas[0].AxisX.Title = "分布位置";//设置坐标轴名称
Chart1.ChartAreas[0].AxisY.Title = "数量";
Chart1.ChartAreas[0].AxisX.TitleForeColor = Color.Blue;//设置坐标轴字体颜色
Chart1.ChartAreas[0].AxisY.TitleForeColor = Color.Blue;
Chart1.ChartAreas[0].AxisX.MajorGrid.Enabled = false;//隐藏主要辅助线-X轴方向上的
Chart1.ChartAreas[0].AxisY.MajorGrid.Enabled = false;//隐藏主要辅助线-Y轴方向上的
Chart1.Width=600;//设置图表尺寸
Chart1.Height=400;
Chart1.Series[0].ChartType = SeriesChartType.Column;//设置图表样式
//Chart1.Series["Series1"].ToolTip = "百分比"+"#PERCENT";//鼠标移动显示数据
Chart1.Series[0].ToolTip = "百分比" + "#PERCENT";//鼠标移动显示数据
Chart1.Series[0].IsValueShownAsLabel =true;//直接显示各项数据
Chart1.Series[0].Label = "#VALY" + "/" + "#TOTAL" + "#LEGENDTEXT";//直接显示各项数据
//获取各分布区数量
string sql = "select count(ksmc) as count,location from Mac_new group by location order by count";
Chart1.DataSource = GetDataSet(sql);
Chart1.Series[0].XValueMember ="location";
Chart1.Series[0].YValueMembers ="count";
Chart1.DataBind();
//Chart1.Series["Series1"].LabelToolTip = "#VALY";
//获取总数量
string sql2 = "select count(ksmc) from Mac_new ";
string sum = getsum(sql2).ToString();
//设置图表标题
Chart1.Titles[0].Text = "科室计算机分布图表 总数量 " + sum;
Chart1.Titles[0].Font = new System.Drawing.Font("宋体", 12f);//设置图表标题字体样式和大小
//设置图例停靠在图表区域的位置（顶部，底部，左侧，右侧）
Chart1.Legends["Legend1"].Docking = System.Web.UI.DataVisualization.Charting.Docking.Right;
}
public DataSet GetDataSet(string sql)
{
DataSet ds = new DataSet();
SqlConnection sqlconstr = new SqlConnection();
sqlconstr.ConnectionString = "server=serverIP;database=databaseName;uid=username;pwd='password'";//此处需要替换成用户自己的连接语句
SqlCommand cmd = sqlconstr.CreateCommand();
cmd.CommandType = CommandType.Text;
cmd.CommandText = sql;
try
{
SqlDataAdapter sda = new SqlDataAdapter(cmd);
sda.Fill(ds);
}
catch (Exception e)
{
Response.Write(e);
}
sqlconstr.Close();
return ds;
}
public string getsum(string sql)
{
SqlConnection sqlconstr = new SqlConnection();
sqlconstr.ConnectionString = "server=serverIP;database=databaseName;uid=username;pwd='password'";//此处需要替换成用户自己的连接语句
sqlconstr.Open();
SqlCommand aa_yjbqhj = new SqlCommand(sql, sqlconstr);
aa_yjbqhj.CommandTimeout = 180;
Double excute_yjbqhj = Convert.ToDouble(aa_yjbqhj.ExecuteScalar());//executescalar方法用来执行聚合函数，并得到结果
string sql2 = Convert.ToString(excute_yjbqhj);//将查询结果由int转变为string，赋值给控件
sqlconstr.Close();
return sql2;
}
/*
MSChart的Label的值的转义符,如下：
#VALX 显示当前图例的X轴的对应文本(或数据)
#VAL, #VALY, 显示当前图例的Y轴的对应文本(或数据)
#VALY2, #VALY3, 显示当前图例的辅助Y轴的对应文本(或数据)
#SER: 显示当前图例的名称
#LABEL 显示当前图例的标签文本
#INDEX 显示当前图例的索引
#PERCENT 显示当前图例的所占的百分比
#TOTAL 总数量
#LEGENDTEXT 图例文本
*/
}本站weisico.com原创文章
微信公众号 weisico-com
ASP.NET微软图表控件MsChart实
PopupWin应用ASP.NET在web页面
webclient不支持并发I/o操作的
ASP.NET MVC3 从零开始一步步
ASP.NET显示渐变图片
解决ASP.NET之Timeout时间已到
ASP.NET上传图片生成缩略图及
ASP.NET上传图片添加文字水印