[ChartControl]小玩一下ASP.NET3.5 Chart Controls-Introduction

[ASP.NET]小玩一下ASP.NET3.5 Chart Controls-Introduction


今天下载了ASP.NET3.5个Chart Controls来玩玩,还不知道这是什么的人可以先看看水瓶大、保哥跟demo写的介绍文:

绘图的新利器 - Microsoft Chart Controls for .NET Framework 3.5

介绍好用组件:Microsoft Chart Controls for .NET 3.5

Microsoft Chart Controls图表新利器

看完上面三篇你应该会对这东西有些基本的了解,先前版本的ASP.NET本来也有Chart这种控件,不过在美观度上实在是差太多了,而熟悉RS 2008的朋友应该对这些图一点也不陌生,因为这些Chart Controls跟RS 2008的图表几乎是一模一样,而从RS 2005到RS 2008的图表为什么会有这么大的进步,其实这要归功于Dundas这家公司了,这套图表是微软向Dundas(可看这边的demo)购买后将其纳入其产品功能中,让整个报表更炫,更漂亮,这是很吸引人的一大卖点,接着微软又将这套图表以Add-ins的形式让我们可以在一般的Webform与Winform中使用,实在是佛心来着。

做完以上的安装后,我们可以在VS 2008的工具箱中看到Chart这个控件:

image

你可能觉得很奇怪,明明看上面的demo就有一堆图,这边怎么只有一个控件,且慢心急,下面我们来看看是怎么一回事吧,当我将控件拉到画面上时他默认的图型是长条图:

image

接着我们一一来介绍一下Chart Controls的一些关键属性吧,这些关键属性放在图表的属性集合中:

image

  •  Annotations
    代表的是帮某个图表加上注解说明,如下图我的设定,图表上就会多画上一条线,而这条线的位置与偏移距离会依我设定的锚点而定,在runtime时甚至可动态决定它出现的位置,跟要显示的Tooltip内容:

image image

  • ChartAreas
    代表的是放置图表区域的外观设定,包含3D效果与图表区的色系都可以自行调整,这边指的图表范围不包含上方的gipi的第一个图与右边的年资标签喔,只包含图表本身:

image image

  • Legends
    代表的是图表区外面的标签等内容,如下例中的年资与薪增等级,用讲的有些不易理解,我们来看看下方有设定Legends与没有设定的差异应该会比较清楚一些,有发现什么布一样吗?年资的那个标签不见了,

imageimage

同时也可以设定将Legends放到图表中,让整体看起来更漂亮喔,只要选择Legends中的DockToChartArea,并选择你要停驻的ChartArea名称就可以啰:

image

  • Series
    代表的是表中的数列集合,有时候我们希望能在一张表中同时呈现两个数据,比如年龄的分布与薪资的等级,藉以同时了解年龄与薪等的状况,要得到下列的呈现方式,我们只要定义好两个Series的Members就好:

image image

另外如果你要选择图表的类型也是在Series中设定喔,请找到ChartType,里头有20-30种图示可以选择:

image image

  • Titles
    代表的是图表的Title,一张图表可以有多个Title叠在一起,看你自己的喜好去设定啰。

image image

简单介绍,因为刚入门时在找这些功能在哪或者是做什么用的也花了一些时间,后续再继续撰写一些程序面的应用吧。

游舒帆 (gipi)

探索原力Co-founder,曾任TutorABC协理与鼎新电脑总监,并曾获选两届微软最有价值专家 ( MVP ),离开职场后创办探索原力,致力于协助青少年培养面对未来的能力。认为教育与组织育才其实息息相关,都是在为未来储备能量,2018年起成立为期一年的专题课程《职涯跃升的关键24堂课》,为培养中国台湾未来的领袖而努力。