MSChart

 

.NET MSChart应用的一个简单例子

介绍MSChart的常用属性和事件

MSChart的元素组成

最常用的属性包括

ChartAreas：增加多个绘图区域，每个绘图区域包含独立的图表组、数据源，用于多个图表类型在一个绘图区不兼容时。

AlignmentOrientation：图表区对齐方向，定义两个绘图区域间的对齐方式。

AlignmentStyle：图表区对齐类型，定义图表间用以对其的元素。

AlignWithChartArea：参照对齐的绘图区名称。

InnerPlotPosition：图表在绘图区内的位置属性。

Auto：是否自动对齐。

Height：图表在绘图区内的高度（百分比，取值在0-100）

Width：图表在绘图区内的宽度（百分比，取值在0-100）

X,Y：图表在绘图区内左上角坐标

Position：绘图区位置属性，同InnerPlotPosition。

Name：绘图区名称。

Axis：坐标轴集合

Title：坐标轴标题

TitleAlignment：坐标轴标题对齐方式

Interval：轴刻度间隔大小

IntervalOffset：轴刻度偏移量大小

MinorGrid：次要辅助线

MinorTickMark：次要刻度线

MajorGrid：主要辅助线

MajorTickMark：主要刻度线

DataSourceID：MSChart的数据源。

Legends：图例说明。

Palette：图表外观定义。

Series：最重要的属性，图表集合，就是最终看到的饼图、柱状图、线图、点图等构成的集合；可以将多种相互兼容的类型放在一个绘图区域内，形成复合图。

IsValueShownAsLabel：是否显示数据点标签，如果为true，在图表中显示每一个数据值

Label：数据点标签文本

LabelFormat：数据点标签文本格式

LabelAngle：标签字体角度

Name：图表名称

Points：数据点集合

XValueType：横坐标轴类型

YValueType：纵坐标轴类型

XValueMember：横坐标绑定的数据源（如果数据源为Table，则填写横坐标要显示的字段名称）

YValueMembers：纵坐标绑定的数据源（如果数据源为Table，则填写纵坐标要显示的字段名称，纵坐标可以有两个）

ChartArea：图表所属的绘图区域名称

ChartType：图表类型（柱形、饼形、线形、点形等）

Legend：图表使用的图例名称

Titles：标题集合。

width：MSChart的宽度。

height：MSChart的高度。

常用事件：

Series1.Points.DataBind()
绑定数据点集合，如果要在一个MSChart控件的一个绘图区(ChartArea)内添加多个不同数据源的图表，就用这个主动绑定数据集合的方法。可以将表中指定字段的值绑定到指定的坐标轴上。

MSChart1.DataBind()
给整个MSChart绑定一个数据源，该MSChart中的图表全部可以使用该数据源作为统计来源。

 

示例：

private void BindGrid()
        {
            chart2.Width = 800;
            chart2.Height = 600;

            //作图区的显示属性设置
            //chart2.ChartAreas["ChartArea1"].AxisX.IsMarginVisible = false;
            //chart2.ChartAreas["ChartArea1"].Area3DStyle.Enable3D = false;
            //背景色设置
            chart2.ChartAreas["ChartArea1"].ShadowColor = Color.Transparent;
            chart2.ChartAreas["ChartArea1"].BackColor = Color.FromArgb(209, 237, 254);         //该处设置为了由天蓝到白色的逐渐变化
            chart2.ChartAreas["ChartArea1"].BackGradientStyle = GradientStyle.TopBottom;
            chart2.ChartAreas["ChartArea1"].BackSecondaryColor = Color.White;
            //X,Y坐标线颜色和大小
            chart2.ChartAreas["ChartArea1"].AxisX.LineColor = Color.FromArgb(64, 64, 64, 64);
            chart2.ChartAreas["ChartArea1"].AxisY.LineColor = Color.FromArgb(64, 64, 64, 64);
            chart2.ChartAreas["ChartArea1"].AxisX.LineWidth = 2;
            chart2.ChartAreas["ChartArea1"].AxisY.LineWidth = 2;
            chart2.ChartAreas["ChartArea1"].AxisX.Title = "时间";
            chart2.ChartAreas["ChartArea1"].AxisY.Title = "灰量";
            //中间X,Y线条的颜色设置
            chart2.ChartAreas["ChartArea1"].AxisX.MajorGrid.LineColor = Color.FromArgb(64, 64, 64, 64);
            chart2.ChartAreas["ChartArea1"].AxisY.MajorGrid.LineColor = Color.FromArgb(64, 64, 64, 64);
            //X.Y轴数据显示间隔
            chart2.ChartAreas["ChartArea1"].AxisX.Interval = 1.0; //X轴数据显示间隔
            chart2.ChartAreas["ChartArea1"].AxisX.IntervalType = DateTimeIntervalType.Days;
            chart2.ChartAreas["ChartArea1"].AxisX.IntervalOffset = 0.0;
            chart2.ChartAreas["ChartArea1"].AxisX.IntervalOffsetType = DateTimeIntervalType.Days;
            chart2.ChartAreas["ChartArea1"].AxisX.LabelStyle.Format = "M-d";
            chart2.ChartAreas["ChartArea1"].AxisY.Interval = 200;//y轴数据显示间隔
            //X轴线条显示间隔
            //chart2.ChartAreas["ChartArea1"].AxisX.MajorGrid.IntervalType = DateTimeIntervalType.Hours;
            chart2.Palette = ChartColorPalette.Pastel;

            string sql = "select sum(zhl) zhl, input_date, ash_type_name from (" +
            " select sum(t.second_load - t.first_load) as zhl," +
                   " to_date(to_char(t.input_date, 'dd/mm/yyyy')||'00:00','dd/mm/yyyy hh24:mi:ss') as input_date," +
                   " u.ash_type_name" +
             " from transportation_bill t, ash_type u" +
             " where t.ash_type_id = u.ash_type_id" +
              " and (t.input_date between to_date('2009-6-11','yyyy-mm-dd') and to_date('2009-6-20','yyyy-mm-dd'))" +//此处加按日期查询的条件
               " and t.sale_organization_id = 1" +//此处加用户所在机构查询条件
             " group by u.ash_type_name, t.input_date" +
             " order by t.input_date" +
             ")" +
             " group by ash_type_name,input_date" +
            " order by input_date";
            DataTable dt2 = OracleHelper.ExecuteDataTable(OracleHelper.ConnectionString, CommandType.Text, sql, "T", null);
            chart2.DataBindCrossTable(dt2.DefaultView, "ash_type_name", "input_date", "zhl", "", PointSortOrder.Ascending);

            foreach (Series sr in chart2.Series)
            {
                sr.ChartType = SeriesChartType.Spline;
                sr.XValueType = ChartValueType.Date;
                sr.MarkerStyle = MarkerStyle.Circle;//散点样式
                sr.MarkerSize = 5;//默认是5，散点大小
                sr.MarkerStep = 1;//默认是1，散点频率
                sr.MarkerColor = 1;//默认是透明，散点颜色
                sr.BorderWidth = 2;
            }

            //chart2.Legends["Default"].Docking = Docking.Left;
        }

 

这几天都在研究微软才发布的MSChart图表工具，我写了简单的例子发上来让大家看看。

使用前需要做得工作：1.把.net平台升级为3.5sp1的。

                           2.安装MSChart控件。

                           3.在使用时必须在项目中的web.canfig中添加一些内容；

                            

Code

    <appSettings>
            <add key="ChartImageHandler" value="Storage=file;Timeout=20;Url=~/tempImages/;"/>
        </appSettings>
    
    <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"/>
            </httpHandlers>
    <handlers>
                <remove name="ChartImageHandler"/>
                <add name="ChartImageHandler" preCondition="integratedMode" verb="GET,HEAD" path="ChartImg.axd" type="System.Web.UI.DataVisualization.Charting.ChartHttpHandler, System.Web.DataVisualization, Version=3.5.0.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35"/>
            </handlers>

这样我们就可以使用控件来画图表了

我在实例中主要对实例2做了详细的说明，实例1是ms上的例子！

前台代码：

Code
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="test1.aspx.cs" Inherits="webchart_test1.test1" %>

<!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" Height="296px" Width="412px" ImageLocation="~/TempImages/ChartPic_#SEQ(300,3)"
            Palette="BrightPastel" ImageType="Png" BackSecondaryColor="White" BackGradientStyle="TopBottom"
            BorderWidth="2" BackColor="#D3DFF0" BorderColor="26, 59, 105" AntiAliasing="None"
            BorderlineDashStyle="Solid">
            <Legends>
                <asp:Legend IsTextAutoFit="False" Name="Default" BackColor="Transparent" Font="Trebuchet MS, 8.25pt, style=Bold">
                </asp:Legend>
            </Legends>
            <BorderSkin SkinStyle="Emboss"></BorderSkin>
            <Series>
                <asp:Series Name="Column" BorderColor="Fuchsia" Color="Green">
                    <Points>
                        <asp:DataPoint YValues="45" />
                        <asp:DataPoint YValues="34" />
                        <asp:DataPoint YValues="67" />
                        <asp:DataPoint YValues="31" />
                        <asp:DataPoint YValues="27" />
                        <asp:DataPoint YValues="87" />
                        <asp:DataPoint YValues="45" />
                        <asp:DataPoint YValues="32" />
                    </Points>
                </asp:Series>
            </Series>
            <ChartAreas>
                <asp:ChartArea Name="ChartArea1" BorderColor="64, 64, 64, 64" BorderDashStyle="Solid"
                    BackSecondaryColor="White" BackColor="64, 165, 191, 228" ShadowColor="Transparent"
                    BackGradientStyle="TopBottom">
                    <Position  Auto="true"/>
                    <Area3DStyle Rotation="10" Perspective="10" Inclination="15" IsRightAngleAxes="False"
                        WallWidth="0" IsClustered="False"></Area3DStyle>
                    <AxisY LineColor="Lime">
                        <LabelStyle Font="Trebuchet MS, 8.25pt, style=Bold" />
                        <MajorGrid LineColor="red" />
                    </AxisY>
                    <AxisX LineColor="Blue">
                        <LabelStyle Font="Trebuchet MS, 8.25pt, style=Bold" />
                        <MajorGrid LineColor="red" />
                    </AxisX>
                </asp:ChartArea>
            </ChartAreas>
        </asp:Chart>
        <asp:Chart ID="chart2" runat="server"  BackColor="#FFFFCC" Palette="BrightPastel" BorderWidth = "2" BorderColor = "#cc9900" >
            <Legends>
                <asp:Legend IsTextAutoFit="False" Name="Default" BackColor="Transparent" Font="Trebuchet MS, 8.25pt, style=Bold">
                </asp:Legend>
            </Legends> <%-- 控制小图标的显示格式 --%>
            <BorderSkin ></BorderSkin> <%--<!--控制整个图片边缘的格式 -->--%>
            
            <Series><%-- 数据(一个数据集为<asp:Series></asp:Series>)   --%>
            </Series>
            <ChartAreas> <%-- 作图区的修饰 --%>
                <asp:ChartArea Name="ChartArea1">
                </asp:ChartArea>
            </ChartAreas>
        </asp:Chart>
    </div>
    </form>
</body>
</html>

后台代码：

Code
using System;
using System.Collections;
using System.Configuration;
using System.Data;
using System.Linq;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.HtmlControls;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Xml.Linq;
using System.Web.UI.DataVisualization.Charting;
using System.Drawing;
namespace webchart_test1
{
    public partial class test1 : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {
            // Create new data series and set it's visual attributes
            //实验1///
            Series series = new Series("曲线");
            series.ChartType = SeriesChartType.Spline;
            series.BorderWidth = 3;
            series.ShadowOffset = 2;

            // Populate new series with data
            series.Points.AddY(167);
            series.Points.AddY(157);
            series.Points.AddY(183);
            series.Points.AddY(123);
            series.Points.AddY(170);
            series.Points.AddY(160);
            series.Points.AddY(190);
            series.Points.AddY(120);
            series["ShowMarkerLines"] = "true";
            
           

            // Add series into the chart's series collection
            Chart1.Series.Add(series);
            Title t = new Title("一个小实验");
            Chart1.Titles.Add(t);
            //实例2/////

            //************************************绘图区********************************************
            //chart 代表整个图片；  legends 代表数据显示标识；  Series 图片中的数据集；  ChartAreas 代表图片中的绘图区（里面能包含多个Series数据集的显示）； 


            //数据源
            int[] test = { 100, 70, 40, 30, 20, 60, 50, 30, 50, 90, 80, 70, 90, 10, 80, 60, 50, 40, 30, 20, 10, 30 };  //内销
            int[] test1 = {  80, 70, 90, 10, 80, 60, 50, 40, 30, 20, 10, 0, 50, 90,100, 70, 40, 30, 20, 60, 50, 30 };  //出口

            //图片属性设置
            chart2.Width = (test.Count() * 25 + 200) >= 600 ? test.Count() * 25 + 200 : 600;    //图片宽度
            chart2.Height = 400;                      //图片高度
            chart2.BackColor = Color.Azure;           //图片背景色
            Title t2 = new Title("试验2");            //图片标题
            chart2.Titles.Add(t2);


            //数据集显示属性设置


            //数据集"出口"显示属性设置
            Series series1 = new Series("出口");        //数据集声明  
            series1.ChartType = SeriesChartType.Line;   //数据显示方式 Line:为折线  Spline:曲线 
            series1.Color = Color.Green;                //线条颜色
            series1.BorderWidth = 2;                    //线条宽度
            series1.ShadowOffset = 1;                   //阴影宽度
            series1.IsVisibleInLegend = true;           //是否显示数据说明
            series1.IsValueShownAsLabel = false;        //线条上是否给吃数据的显示
            series1.MarkerStyle = MarkerStyle.Circle;   //线条上的数据点标志类型
            series1.MarkerSize = 8;                     //              标志的大小

            DateTime date1 = DateTime.Now.Date;         
            for (int i = 0; i < test1.Count(); i++)      //向数据集绑定数据
            {
                series1.Points.AddXY(date1, test1[i]);  //分别往X,Y轴添加数据(可以为多种类型)    （有多中添加方式）
                date1 = date1.AddDays(1);
            }
            chart2.Series.Add(series1);                 //把数据集添加到chart中


            //数据集"内销"显示属性设置
            Series series2 = new Series("内销");
            series2.ChartType = SeriesChartType.Line;   //数据显示方式 Line:为折线  Spline:曲线 
            series2.Color = Color.Red;                //线条颜色
            series2.BorderWidth = 2;                    //线条宽度
            series2.ShadowOffset = 1;                   //阴影宽度
            series2.IsVisibleInLegend = true;           //是否显示数据说明
            series2.IsValueShownAsLabel = false;        //线条上是否给吃数据的显示
            series2.MarkerStyle = MarkerStyle.Circle;   //线条上的数据点标志类型
            series2.MarkerSize = 8;                     //              标志的大小
            DateTime date = DateTime.Now.Date;
            for (int i = 0; i < test.Count(); i++)
            {
                series2.Points.AddXY(date, test[i]);
                date = date.AddDays(1);
            }

            chart2.Series.Add(series2);


            //作图区的显示属性设置
            chart2.ChartAreas["ChartArea1"].AxisX.IsMarginVisible = false;
            chart2.ChartAreas["ChartArea1"].Area3DStyle.Enable3D = false;
            //背景色设置
            chart2.ChartAreas["ChartArea1"].ShadowColor = Color.Transparent;
            chart2.ChartAreas["ChartArea1"].BackColor = Color.Azure;         //该处设置为了由天蓝到白色的逐渐变化
            chart2.ChartAreas["ChartArea1"].BackGradientStyle = GradientStyle.TopBottom;
            chart2.ChartAreas["ChartArea1"].BackSecondaryColor = Color.White;
            //X,Y坐标线颜色和大小
            chart2.ChartAreas["ChartArea1"].AxisX.LineColor = Color.Blue;
            chart2.ChartAreas["ChartArea1"].AxisY.LineColor = Color.Blue;
            chart2.ChartAreas["ChartArea1"].AxisX.LineWidth = 2;
            chart2.ChartAreas["ChartArea1"].AxisY.LineWidth = 2;
            chart2.ChartAreas["ChartArea1"].AxisY.Title = "百分比";
            //中间X,Y线条的颜色设置
            chart2.ChartAreas["ChartArea1"].AxisX.MajorGrid.LineColor = Color.Blue;
            chart2.ChartAreas["ChartArea1"].AxisY.MajorGrid.LineColor = Color.Blue;
            //X.Y轴数据显示间隔
            chart2.ChartAreas["ChartArea1"].AxisX.Interval = 1;  //X轴数据显示间隔
            chart2.ChartAreas["ChartArea1"].AxisY.Interval = 10;
            //X轴线条显示间隔
            chart2.ChartAreas["ChartArea1"].AxisX.MajorGrid.Interval = 1;
            //********************************************************************************************
            
        }
    }
}

 

实例2的图片效果：