ASP.NET微软MsChart图表实例之绑定数据源和方法属性介绍

2次阅读
没有评论

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原创文章