严寒的窝

身无彩凤双飞翼，心有灵犀一点通

日志

关于我

严寒

有所为有所不为

文章分类

图表与报表

2009-11-03 15:44:51| 分类： delphi | 标签： |举报 |字号大中小订阅

下载LOFTER 我的照片书 |

Delphi的图表组件主要有Chart和DBChart两个.
Chart组件用于创建不使用数据表的图表;
DBChart组件则是Chart组件的数据库版本,它创建的图表必须使用数据表中的数据.
不过,除在数据表设置上有明显不同外,它们在图表设计方法上是一样的.
9.1.1Chart图表组件
Chart图表组件在Additional组件面板上,它为设计人员提供了功能非常强大的图表开发手段,为加快图表开发,此组件还为设计人员提供了图表设计器,通过图表设计器,设计人员可以非常容易地设计出应用程序中使用的各种复杂图表,为了让读者熟练利用图表设计器设计图表,下面先说明图表设计器的使用方法.
Chart图表组件
图表组件
9.1.1Chart图表组件
要使用图表组件创建或修改图表,首先要进入图表设计器,进入图表设计器的方法是:双击图表组件,打开一个图表设计窗口,读者可容易看出,图表设计窗口包含Chart和Series两个主选项页,下面分别介绍这两个选项页的基本作用 .
图表设计器
图表组件
Chart图表组件
图表设计器
图表样式选择窗口
1.Chart页
Chart页主要用于创建或修改图表,它又包含9个部分,分别是Series,General,Axis,Titles,Legend,Panel,Paging,Walls,3D.
图表设计器
(1) Series页
设计人员可创建或修改图表,series子页如图所示,在此页上有八个按钮,分别是:
↑/↓ 用于调整图表的先后顺序.
Add 用于增加一个新图表,单击此按钮将打开一个选择图表样式对话框,如图9-1-3所示,在这个窗口上选择需要的图表样式,然后按"OK"按钮即完成图表的创建工作.
Delete 删除用户选择的图表.
Title 为选择的图表设置新标题名.
Clone 按照当前选择的图表再克隆一个新图表.
Change 进入图表样式对话框,修改当前图表的样式.
Close 关闭图表设计器.
(2) General 页
General页用于设置打印和显示图表时所用的参数,如图所示,主要包括:
Print Preview 图表打印预览按钮,单击此按钮,将打开一个打印预览窗口,在此窗口中可进行图表打印前的设置.
General页
Allow zoom 设置是否允许通过拖动鼠标来放大或缩小图表显示.
Export 用于将当前图表按指定的格式保存到剪切板或指定文件中,此按钮也打开一个对话框窗口,在此窗口中,可选择保存文件的类型.
Margins 设置图表在显示组件中的边距,可对图表的左,右,上和下四个边距进行设置.
Scroll 设置用鼠标右键拖动图表的方式,共有四种选择,分别为None(不可以),Vertical(只允许垂直方向),Horizontal(只允许水平方向),Both(水平和垂直方向均可).
(3) Axis页
Axis 页用于设置图表的数轴,显示情况如图所示:
Axis页
Axis组选择要设置的数轴,可选择的数轴有Left(左边),右(Right),Top(上边),Bottom(下边),Depth(深度)等,这是一个单选按钮组,选择完成后即可设置此数轴的参数.
Show Axis 设置是否显示数轴.
Visible 设置是否显示在Axis组中选择的数轴.
Scales子页
设置所选数轴的刻度大小,其中Maximum表示最大刻度值,Minimum表示最小刻度值,Increment表示数轴增加的步长;Automatic表示是否使用自动刻度,logarithmic表示按数据值的对数显示图表,Inverted表示垂直反转图表.
Title子页
用于设置每个数轴的标题,其中angle表示标题的旋转角度,Size表示标题与组件边界的距离,当为0时表示使用自动值,Font用于设置标题的字体,这里的字体,最好选择字体名前有@符号的旋转字体,选择这样的字体再结合Angle的设置,可达到较好的标题设置效果.
label子页
用于设置数轴上显示的标签.Visible表示是否显示标签;Round First表示是否从最小值开始设置标签;Label On Axis表示是否显示初始标签;Separation表示标签最小间隔比例;Values Format表示标签值显示的掩码,用于设置显示标签的格式;Style用于设置数轴上显示何种标签,默认(Auto)为系统自动设置,显示平均刻度数据值(Value,与Auto相同),数据文本(Text),图表中的数据值(Mark)和无标签(None).
Ticks子页
用于设置数轴上的标记,Axis Border用于设置数轴使用的线型,颜色和粗细等;Grid Border用于设置图表中的水平网格的线型,颜色和粗细等;Ticks按钮用于设置数轴外侧标记的线型,颜色和粗细等;inner按钮用于设置数轴内侧标记的线型,颜色和粗细等;Len则用于设置相应标记的长度.
Minor子页
用于设置数轴上的小标记,即由Count设置的细分标记.其中,Minor Ticks用于设置小标记线型,颜色和粗细等;Minor Grid用于设置细分网格的线型,颜色和粗细等;Len用于设置小标记的长度;Count用于设置每个水平网格之间的小网格的个数,注意只有此值不为0时,本页其余的设置才有意义.
(4) Titles页
Titles 页用于设置图表组件的标题和页脚,显示情况如图所示:
图表组件的Titles页
下拉框它有Title和Foot两个选项,用于选择当前的设置是针对标题还是页脚.
Font 设置字体的有关属性.
Border 设置是否在文本四周显示边框及边框的颜色,线型和粗细等.
Alignment 设置文本显示的对齐方式,有左对齐(Left),右对齐(Right)和水平居中(Center)三种方式.
Adjust Frame 当设置显示边框时,选中此项表示仅在标题或页脚的四周加边框,否则将在标题或页脚的整个显示区加边框.
Back Color 用于设置标题或页脚的背景颜色.
Pattern 用于设置标题或页脚的背景图案和颜色
(5) Legend页
用于设置图表中显示的"图例板",图例板的作用是显示图表组件中相关图表的基本信息,其显示情况如图所示:
图表组件中的Legend页
Visible 设置是否显示图例板.
Back Color 设置图例板的背景色.
Frame 设置图例板边框的线型,颜色和粗细等.
图例板
窗体上的显示的图表组件
Position组设置图例板在组件中的位置,共有Left,Right,Top和Bottom 四种选择.
Legend Style 设置图例板的显示样式,共有四种,分别Automatic,Series Name,Series Values和Last Values,其中Automatic,Series Name的功能相同,表示显示图表的名称;Series Values表示显示图表的数据值;Last Values表示显示图表的最后一个数据值.
Text Style 此属性仅在Legend Style设置为Series Values或Last Values时起作用,用于设置在图例板上是显示数值,还是显示百分比.
%Top Pos 设置图例板在图表组件中的上边距占组件高度的百分比.
%Color Width 设置图例板上的图标占整个图例板宽度的百分比.
Dividing Lines 设置图例板上每行数据间是否加分隔线.
Shadow 设置图例板的阴影颜色和大小.
(6) Panel页
图表组件中的Panel页
(6) Panel页
用于设置图表组件面板的斜面,背景,边框等,其图示如下.在此页中可做如下设置:
Bevel Inner 设置图表面板内斜面的显示格式,它有三种选择,即平面 (None),下陷(Lower)和凸起(Raise).
Bevel Outer 设置图表面板外斜面的显示格式,可取值有三种,与Bevel Inner相同.
Width 斜面的宽度.
Back Image 用于设置或清除图表面板的背景图像,其中Browse用于加载背景图像;Inside表示背景图像是否仅限于图表的背景;Stretch表示通过放大图像来填充背景,Tile表示通过图像拼接来填充背景,Center表示仅使用原始图像,且显示在图表面板的中央.
Panel Color 用于设置图表面板的背景颜色.
Border 用于设置图表面板是否有边框.
Gradient 用于设置图表面板的背景颜色是否使用渐变色,其中Start Color表示开始色;End Color表示结束色;Visible表示是否使用渐变色; Direction用于设置渐变开始的方向,如Bottom Top则表示从底部到顶部渐变等.
(7) Paging 页
用于定义每个图表页上显示的数据点数.在Points per Page中输入的整数就是图表每页显示的数据点数,若此值为0则表示在一页上显示所有数据,用户可通过此页下面的First,Previous,Next和Last按钮来显示当前图表中未显示出来的数据点图像.
图表组件的Paging页
图表组件的Walls页
(8) Walls页
Walls页用于定义左边,下边和背景墙的大小和颜色,在此页中可做的设置如下:
Background 设置背景色.
Border 设置边框的线型,粗细和颜色.
Pattern 设置背景图案.
Size 用于设置背景墙的厚度.
Transparent 设置背景是否透明.图表组件的Walls页图表组件的3D页
Dark 3D 设置是否通过阴影体现立体效果
图表组件的3D页
(9) 3D页
用于设置图表的显示区域,位置,旋转等,在此页中可设置如下属性:
3 Dimensions 设置是否使用3维效果显示图表.
3D% 设置3维效果的程度.
Orthogonal 设置图表是否使用旋转效果,当不选中此项时,表示允许旋转.
Zoom 放大或缩小图表的显示区域.
Rotation 水平旋转图表,当Orthogonal不选时有效.
Elevation 垂直旋转图表,当Orthogonal不选时有效.
Horiz. Offset 设置图表水平位移的大小.
Vert. Offset 设置图表垂直位移的大小.
Perspective 当orthogonal为False时,此属性可设置图表的透视程度.
Zoom Text 设置是否使用用户定义的文本属性.
2.Series页
Series页中主要用于修改各种类型图表的参数,在此页顶部的下拉组合框中可选择要设置的图表,在它的下面有四个用于设置图表参数的子选项页,这四个子选项页是Format,General,Marks和Data Source,下面分别说明它们的设置方法.
图表组件的Format页
(1) Format 页
Format页中包含由图表类型决定的参数,如图所示的是柱形图表的Format页,在此页中可设置柱形的样式(Style),边框(Border),图案(Pattern),每个柱形是否同色(Color Each),柱的宽度比例(%Bar Width)和偏离数据点比例(%Bar Offset)等参数.
图表组件的Format页
(2) General页
可设置是否显示图例板(Show in Legend),鼠标在图表上显示的光标(Cursor),水平数轴的位置(Horizontal Axis),垂直数轴的位置(Vertical Axis),数据显示格式(Values),百分比显示格式(Percent)和是否使用日期时间(Datetime)作为数轴的刻度
图表组件的General页
(3) Marks页
在Marks页上可设置图表中显示的数据标记,在此页中可设置的属性有:
图表组件的Marks页
(3) Marks页
在Marks页上可设置的属性有:
Visible 设置是否显示数据标记.
Format 设置标记的背景色(Back Color),字体(Font),边框(Border),是否透明(Transparent)和超出图表的标记部分是否被剪切(clipped)等.
Arrow 用于设置标记与图形之间连线的颜色和长度.
Style 用于设置使用何种标记,如百分比(Percent),标签(label),数据值(value)及它们的组合等
(4) DataSource页
Data Source页可用于设置图表使用的数据(如图所示),在此页的下拉选择框中有三种选择,分别是No Data,Random Values和Function三种,它们均用于设计期的图表显示,当程序启动后,组件中并没有显示任何图表,只有增加了要显示的数据后,图表才能显示出来.
为图表组件添加数据一般使用图表的Add方法,使用格式为:图表对象.Add(数据值,'标题',颜色值),此语句功能是为指定的图表增加数据点.注意,在图表设计器中,每增加一个图表,在程序代码编辑窗口就增加一个与其对应的图表对象,默认图表对象名为SeriesN(N为自然数) .
(4) DataSource页
图表组件的DataSource页
例如,显示一个如图所示的图表.设置方法如下:
(1)放置组件
在窗体上放入六个SpinEdit组件,六个Label组件,一个BitBtn按钮组件和一个Chart组件,并将它们调整到合适的位置.
例如,显示一个如图所示的图表.设置方法如下:
(2) 设置组件的属性
设置Label组件的标题(caption)属性为"上海"等城市名;设置SpinEdit组件的Value属性值为图中显示的值;双击Chart组件,在打开的图表设计器中通过"Add"按钮增加一个柱形图表,然后通过图表设计器中的Title按钮修改图表名为"温度".
再到Chart页的Title子页,输入图表的标题名为"中国部分城市11月12日的温度图示".再到Axis子页,首先选择左侧坐标轴(Left),再到Axis页的Title子页中设置左侧标坐轴的标题为"温度",注意此处的字体最好设置为"@宋体",旋转角度为270度.对Bottom轴的设置与设置Left轴相似,请读者自己设置.
(3) 为图表增加数据
BitBtn1的OnClick事件的代码如下,其中Series1是在图表设计器中添加的Bar型图表:
procedure TForm1.BitBtn1Click(Sender: TObject);
begin
Series1.Clear;
Series1.Add( spinedit1.Value , '上海' , clblue );
Series1.Add( spinedit2.Value , '北京' , clGreen );
Series1.Add( spinedit3.Value , '广州' , clwhite );
Series1.Add( spinedit4.Value , '济南' , clTeeColor );
Series1.Add( spinedit5.Value , '成都' , clTeeColor );
Series1.Add( spinedit6.Value , '西安' , clTeeColor );
end;
9.1.2 DBChart图表组件
DBChart图表组件在Data Controls组件面板上,如图所示.除设置数据源外,对该组件的设置方法与Chart图表组件的设置方法相同.
DBChart图表组件
图表
组件
例如,用图表显示Animale.dbf数据表的Size字段的值,设置后的显示结果如图所示.
使用数据表显示的图表
(1)建立一个项目文件,在主窗体上放入一个数据表组件Table1,将其DatabaseName,TableName和Active的属性设为DBDEMOS ,Animals.dbf和True.
(2)在主窗体上放入一个名为DBChart1的图表组件,并双击DBChart1组件进入图表设计窗口.单击此窗口中的"Add"按钮,选择满意的图表样式(例如选择Bar)并按"OK" .如果你想修改图表曲线的名称,单击图中的Title按钮,则打开一个标题编辑窗口,在此窗口中可完成图表名的修改.
(3)设置图表的数据源
进入图表设计窗口选择此窗口Series页的Data Source子选项页,在此页的下拉框中选择"DateSet" ,在显示窗口中的"DataSet"下拉框中选择要显示的数据表Table1;然后设置Label下拉框,在此框中选择数据表的字段名,此字段的值将作为X坐标轴上的标签.
在Label下拉框的下面还有两个选择框,分别是X和Bar(当图表为曲线时,此处显示为Y),X下拉框用于选择X轴上的坐标值所使用的字段.即X坐标使用的是此字段的值,而显示标签则是Label下拉框中指定字段值.Bar(或Y)中选择的字段是坐标系中Y轴的坐标值.
(3)设置图表的数据源
设置表示使用的数据源

评论这张

转发至微博

阅读(508)| 评论(0)

历史上的今天

this.p={  m:2,
              b:2,
              loftPermalink:'',
              id:'fks_083066087094082067082094083095086087088068080084082',
              blogTitle:'图表与报表 ',
              blogAbstract:'Delphi的图表组件主要有Chart和DBChart两个.<BR\>Chart组件用于创建不使用数据表的图表;<BR\>DBChart组件则是Chart组件的数据库版本,它创建的图表必须使用数据表中的数据.<BR\>不过,除在数据表设置上有明显不同外,它们在图表设计方法上是一样的.<BR\>9.1.1Chart图表组件<BR\>Chart图表组件在Additional组件面板上,它为设计人员提供了功能非常强大的图表开发手段,为加快图表开发,此组件还为设计人员提供了图表设计器,通过图表设计器,设计人员可以非常容易地设计出应用程序中使用的各种复杂图表,为了让读者熟练利用图表设计器设计图表,下面先说明图表设计器的使用方法.<BR\>Chart图表组件<BR\>图表组件<BR\>9.1.1Chart图表组件<BR\>要使用图表组件创建或修改图表,首先要进入图表设计器,进入图表设计器的方法是:双击图表组件,打开一个',
              blogTag:'',
              blogUrl:'blog/static/2197424200910334451931',
              isPublished:1,
              istop:false,
              type:0,
              modifyTime:0,
              publishTime:1257234291931,
              permalink:'blog/static/2197424200910334451931',
              commentCount:0,
              mainCommentCount:0,
              recommendCount:0,
              bsrk:-100,
              publisherId:0,
              recomBlogHome:false,
              currentRecomBlog:false,
              attachmentsFileIds:[],
              vote:{},
              groupInfo:{},
              friendstatus:'none',
              followstatus:'unFollow',
              pubSucc:'',
              visitorProvince:'',
              visitorCity:'',
              visitorNewUser:false,
              postAddInfo:{},
              mset:'000',
              mcon:'',
              srk:-100,
              remindgoodnightblog:false,
              isBlackVisitor:false,
              isShowYodaoAd:false,
              hostIntro:'有所为有所不为',
              hmcon:'0',
              selfRecomBlogCount:'0',
              lofter_single:'<iframe width="140" height="560" style="overflow:hidden;" src="http://www.lofter.com/mailEntry.do?blogad=1&blog" frameBorder="0"></iframe>'
            }

{list a as x}
    {if !!x}
    <div class="iblock nbw-fce nbw-f40">
      <a class="fc03 noul" target="_blank" hidefocus="true" href="http://blog.163.com/${x.visitorName}/">
      {if x.visitorName==visitor.userName}
      <img alt="${x.visitorNickname|escape}" onerror="this.src=location.f40" class="cwd bdwa bdc0" src="${fn1(x.visitorName)}&r=${visitor.imageUpdateTime}"/>
      {else}
      <img alt="${x.visitorNickname|escape}" onerror="this.src=location.f40" class="cwd bdwa bdc0" src="${fn1(x.visitorName)}"/>
      {/if}
      </a>
      <div class="cwd vname thide">
        {if x.moveFrom=='wap'}
          <a class="noul pnt" target="_blank" href="http://blog.163.com/services/wapblog.html?frompersonalbloghome"><span title="来自网易手机博客" class="iblock wapIcon"> </span></a>
        {elseif x.moveFrom=='iphone'}
          <a class="noul pnt" target="_blank"><span title="来自iPhone客户端" class="iblock iphoneIcon"> </span></a>
        {elseif x.moveFrom=='android'}
          <a class="noul pnt" target="_blank"><span title="来自Android客户端" class="iblock androidIcon"> </span></a>
        {elseif x.moveFrom=='mobile'}
          <a class="noul pnt" target="_blank" href="http://blog.163.com/services/emsblog.html?frompersonalbloghome"><span title="来自网易短信写博" class="iblock wapIcon"> </span></a>
        {/if}
        <a class="fc03 m2a"  target="_blank" hidefocus="true" href="http://blog.163.com/${x.visitorName}/">
          ${fn(x.visitorNickname,8)|escape}
        </a>
      </div>
    </div>
    {/if}
    {/list}

<#--最新日志，群博日志--> <#--推荐日志-->

<p class="fc06">推荐过这篇日志的人：</p>
    <div>
      {list a as x}
      {if !!x}
      <div class="iblock nbw-fce nbw-f40">
        <a class="fc03 noul" target="_blank" hidefocus="true" href="http://blog.163.com/${x.recommenderName}/">
        <img alt="${x.recommenderNickname|escape}" onerror="this.src=location.f40" class="cwd bdwa bdc0" src="${fn1(x.recommenderName)}"/>
        </a>
        <div class="cwd thide">
          <a class="fc03 m2a" target="_blank" hidefocus="true" href="http://blog.163.com/${x.recommenderName}/">
            ${fn(x.recommenderNickname,6)|escape}
          </a>
        </div>
      </div>
      {/if}
      {/list}
    </div>
    {if !!b&&b.length>0}
    <p  class="fc06">他们还推荐了：</p>
    <ul>
    {list b as y}
      {if !!y}
        <li class="rrb"><span class="iblock">·</span><a class="fc03 m2a" target="_blank" href="http://blog.163.com/${y.recommendBlogPermalink}/?from=blog/static/2197424200910334451931">${y.recommendBlogTitle|escape}</a></li>
      {/if}
    {/list}
    </ul>
    {/if}

<#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇，下一篇--> <#-- 热度 -->

{list a as x}
    {if !!x}
    <div class="hotItem iblock nbw-fce nbw-f40">
      <a class="fc03 noul" target="_blank" hidefocus="true" href="http://blog.163.com/${x.publisherUsername}/">
      {if x.publisherUsername==visitor.userName}
      <img alt="${x.publisherNickname|escape}" onerror="this.src=location.f40" class="cwd bdwa bdc0" src="${fn1(x.publisherUsername)}&r=${visitor.imageUpdateTime}"/>
      {else}
      <img alt="${x.publisherNickname|escape}" onerror="this.src=location.f40" class="cwd bdwa bdc0" src="${fn1(x.publisherUsername)}"/>
      {/if}
      </a>
      <div class="cwd vname thide">
        <a class="fc03 m2a"  target="_blank" hidefocus="true" href="http://blog.163.com/${x.publisherUsername}/">
          ${fn(x.publisherNickname,8)|escape}
        </a>
      </div>
      <a class="f-myLikeIcons hottype {if x.type==1} js-liketype{elseif x.type==2} js-reblogtype{elseif x.type==3} js-sharetype{else}{/if}" target="_blank" hidefocus="true" href="http://blog.163.com/${x.publisherUsername}/"> </a>
    </div>
    {/if}
    {/list}

<#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->

页脚

我的照片书 - 手机博客 - 下载LOFTER APP - 订阅此博客

严寒的窝

导航

日志

图表与报表

历史上的今天

最近读者

热度

评论

页脚