MSChart使用做折线图饼图(转)

首先当然需要下载MSChart 下载地址 而且微软官方有个很不错的实例代码可以帮助学习使用MSChart 下载地址,当然不用我说.大家也知道的.需要NET Framework 3.5以及配合VS2008 sp1来使用了,至于vs2010好像还没有发现MSChart ,希望有知道的朋友给点帮助.

  安装完MSChart vs2008报表一栏里会出现MSChart控件..二话不说 拖到页面.自动生成如下代码:

clip_image001clip_image002代码

<asp:Chart ID="Chart1" runat="server">
<Series>
<asp:Series Name="Series1">
</asp:Series>
</Series>
<ChartAreas>
<asp:ChartArea Name="ChartArea1">
</asp:ChartArea>
</ChartAreas>
</asp:Chart>

相信在你们看过微软的实例后对这些属性会有一些了解滴..

然后进入正题,本文也主要介绍 MSChart的 折线图,圆饼图,和柱状图, 因为这三种本人感觉是最常用的.

对于这三种用MSChart来实现的话本人感觉比较困难的就是数据绑定带来的麻烦,因为在我们平时使用的时候基本都是动态的数据,

而微软实例基本都是写死在页面上的数据, 而且网上这方面资料也比较少,只能自己动手实践啦.

先介绍几种MSChart的数据绑定方式,

第一种,也是最通俗的一种

Chart1.DataSource = GetData.GetChartData();
Chart1.Series["ChartArea1"].XValueMember = "home";
Chart1.Series["ChartArea1"].YValueMembers = "num1";

第二种往后都是通过List的集合形式绑定数据,这里就用变量list来代替了.一些变量都是对应实体类的名称当然也对应数据库字段

Chart1.DataBindTable(list, "home");

"home"是 x轴坐标

第三种,home 分组,Time X轴坐标,num1 y轴坐标

Chart1.DataBindCrossTable(list, "home", "Time", "num1", "Label=num1,ToolTip=num1");

第三种,折线图绑定方式

Chart1.Series[0].Points.DataBind(list, "home", "num1", "Label=num1,ToolTip=num1");

第四种,折线图绑定方式

clip_image001[1]clip_image002[1]代码

Chart1.DataBindCrossTable(list, "home", "Time", "num1", "Label=num1,ToolTip=num1");
//绘制线条
       MarkerStyle marker = MarkerStyle.Square;
foreach (Series ser in Chart1.Series)
       {
           ser.ShadowOffset = 1;
           ser.BorderWidth = 2;
           ser.ChartType = SeriesChartType.Line;
           ser.MarkerSize = 12;
           ser.MarkerStyle = marker;
           ser.MarkerBorderColor = Color.FromArgb(64, 64, 64);
           ser.Font = new Font("Trebuchet MS", 8, FontStyle.Regular);
           marker++;
       }        

第五种:

Chart1.Series["Series1"].Points.DataBindXY(list, "home", list, "num1");

我所了解的就这么几种了,有朋友知道有更好的绑定方式不妨贴上代码来.

下面介绍下MSChart下的柱形图

常用的属性这篇博客都有介绍,在这里我就不罗嗦了..http://www.cnblogs.com/wenjl520/archive/2009/05/16/1458461.html

clip_image001[2]clip_image002[2]代码

//是否启用3D显示
        Chart1.ChartAreas[0].Area3DStyle.Enable3D = true;
//显示类型,可以是柱形 折线等等
        Chart1.Series[0].ChartType = SeriesChartType.Line;
Draw as 3D Cylinder
        Chart1.Series[0]["DrawingStyle"] = "Cylinder";
//像素点见宽度
        Chart1.Series[0]["PointWidth"] = "0.8";
//是否显示数值
        Chart1.Series[0].IsValueShownAsLabel = true;
//X轴数据显示间隔
        Chart1.ChartAreas[0].AxisX.Interval = 1;
//直角坐标显示,
        Chart1.ChartAreas[0].Area3DStyle.IsRightAngleAxes = false;
//是否群集在一起
        Chart1.ChartAreas[0].Area3DStyle.IsClustered = false;
//转动X轴角度
        Chart1.ChartAreas[0].Area3DStyle.Inclination = 40;
//转动Y轴角度
        Chart1.ChartAreas[0].Area3DStyle.Rotation = 20;
foreach (Series ser in Chart1.Series)
        {
//柱形宽度
            ser["PixelPointWidth"] = "40";
//像素点深度
            ser["PixelPointDepth"] = "80";
//像素点间隙深度
            ser["PixelPointGapDepth"] = "10";
        }

这些属性都是设置MSChart的外观样式的属性,大家可以尝试修改试试,

当然主要的是绑定数据了.所以在调用这些属性时先用上文介绍的几种绑定方式绑定数据.

有些属性可能在3D模式下失效或者在2D模式下失效,这是正常现象,

效果图:

clip_image003

折线图:

属性同上..有些属性会在折线图下失效,

效果图:

clip_image004

圆饼图:

clip_image001[3]clip_image002[3]代码

IList<ChartModel> list = GetData.GetChartDataListByPie();
//数值显示百分比形式
        Chart1.Series["Series1"].Label = "#PERCENT{P}";
        Chart1.Series["Series1"].Points.DataBind(list, "home", "num1", "LegendText=home,YValues=num1,ToolTip=num1");
   Chart1.Series["Series1"].ChartType = System.Web.UI.DataVisualization.Charting.SeriesChartType.Pie;
        Chart1.Series["Series1"].ToolTip = "#LEGENDTEXT: #VAL{C} million";
  Chart1.ChartAreas["ChartArea1"].Area3DStyle.Enable3D = true;

clip_image005

这个比较简单吧..

主要是这里的 Chart1.Series["Series1"].Points.DataBind(list, "home", "num1", "LegendText=home,YValues=num1,ToolTip=num1");

LegendText整了我半天.这个是显示右侧说明的,开始老是显示不出来,而且还不统一.

Legend其实就是右侧显示的说明,但是做过的朋友会发现在柱形图还有折线图如果页面指定了一个<Lengend></Lengend>标签的话,会多显示一个,所以需要在执行绑定的时候

写上这么一段代码 Chart1.Series.Clear();

MSChart可不止可以制作这三种图形,我只是觉得这三种比较常用.想在圆饼图中合并几项成显示成其他,搞了半天没搞出来,郁闷,谁知道告诉下.

转载于:https://www.cnblogs.com/dwfbenben/archive/2011/12/30/2308036.html

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值