ChartDirector应用笔记(一)

ChartDirector介绍

ChartDirector是一款小巧精细的商业图表库。其适用的语言范围非常广泛,包括.Net, Java, Asp, VB, PHP, Python, Ruby, C++等。ChartDirector既可以为WEB应用提供图表支持,还能为桌面应用提供良好的图表体验。除此之外,ChartDirector还能与MFC, Qt等界面框架无缝结合。这一点,在官方提供的帮助文档中即可窥知一二。在本系列文章中,也将以Qt应用程序框架作为基础,编写各种图表的应用实例。

     正如上面所说的,ChartDirector是一款商业图表库。在未获得官方使用授权的情况下使用,图表中会出现黄色标识符。作为独立的个人开发者,显然无法也不必要去购买该库的使用证书。网上的破解方式也比较多,基本上是对官方附带的Dll文件进行破解覆盖即可。

ChartDirector类层次

ChartDirector库中有三大类继承结构较为常用,下面画出了这三大类继承结构:

图表类继承层次是对整个ChartDirector库的功能总结。从上图可以看出,ChartDirector类库能够绘制七大种类的图表:MultiChart, PolarChart, ThreeDChart, BaseMeter, PieChart, XYChart, PyramidChart。其中,金融类图表FinanceChart继承自MultiChart。金融类图表常常包含各种参数和指标,因此使用MultiChart作为基类继承也是情理中的事情。ThreeDChart类派生出了两个子类:SurfaceChart和ThreeDScatterChart。这两个子类用于绘制3D图表,3D图表经常用于立体表现数据差异,绘制出来的图表具有较强的立体视效。BaseMeter类代表仪表基类,派生子类包括:AngularMeter和LinearMeter类。如类名所示的那样,AngularMeter绘制的仪表常常带有弧度,而LinearMeter类则是线性绘制仪表,通常具有水平或者垂直外观。

XYChart类是ChartDirector类库中的一个大类,凡是包含X、Y坐标的图表都属于XYChart。因此,用于XYChart类的Layer类也派生出了丰富的子类,用于实现不同类型的XY图表。Layer类的具体作用是什么呢?由于官方文档上并未对ChartDirector的设计架构进行阐述,因此只能对Layer的功能进行推测理解。我的理解是,Layer就是一般意义上的图层,如果需要在同一个画板上绘制多个XY图表,需要组合不同的Layer类。不同的Layer可以组合在一起,实现复杂的功能。一般在绘制图表的时候,需要根据不同的图表类型添加不同的Layer派生类。

下面是Polar/Radar类的图层类继承层次:

可以看到,PolarChart类的图层类相对较少,样式比较固定。以PolarLayer类为基类派生出了PolarLineLayer, PolarAreaLayer, PolarVectorLayer三个类。

整个ChartDirector类库基本上主要就是由上述这些类组成的。当然,还包括Array, Axis, Box, Sector类辅助类。从这方面考察,ChartDirector类库还是足够轻巧的,学习使用上也较为简单。遗憾的是,附带的说明文档并未涉及太多的架构方面的说明。因此,在完全理解ChartDirector库的设计理念方面存在一定困难。

重要概念

要熟练运用ChartDirector类库需要理解好一些概念。下面是本人的一些总结和理解:

  • Chart对象。Chart对象是绘图的基础,可以是上述图表类继承层次中的任意一个类的对象。每一个绘制出来的图表都属于特定的图表类。如帮助文档中的Simple Bar Chart,这是一个简单的XYChart的应用实例,生成的chart对象是XYChart类的实例。总之,在绘制每一个图表前都需要实例化一个Chart对象。
  • Layer类。Layer类在上面稍微提过,我将之理解为图片处理中的图层。Layer之间可以叠加以组合绘制出更加复杂的图表。值得注意的是,不同的图表组件需要对应的Layer类来实现。在XYChart类中,实现了很多了add*函数用于给chart对象添加图层。如addLineLayer, addBarLayer,  addBoxLayer等。
  • PlotArea。PlotArea类表示XY图表中的绘图区域。在绘制XY图表的过程中,设置PlotArea是Chart对象实例化完成后需要做的第一件事。PlotArea使用像素坐标系统,也就是说:(0,0)位于绘制区域的左上方,X轴往右增加,Y轴往下增加。对于其他种类的图表,PlotArea这个概念并不存在。
  • DrawArea。DrawArea类处于绘图底层,是整个类库绘图的重要基础。ChartDirector类库中所有的图表类都在内部维护一个DrawArea对象,该对象用于提供绘制原语,如绘制线条、形状、文本等。用户也可以通过获取DrawArea对象来自定义绘制选项。
  • QChartViewer. QChartViewer是用来整合ChartDirector类库到Qt框架中来的中间类。该类继承自QLabel和ViewPortManager类,用于表现图表绘制结果,处理鼠标、键盘交互事件等。在ChartDirector类库中,QChartViewer类以源代码的形式附带。用户可以查看其的实现方式,也可以直接包含进Qt工程中进行使用。

绘制步骤

以simple bar chart为例:

  1. 生成Chart对象:XYChart* c = new XYChart(250, 250);
  2. 设置绘图区域(可选):c->setPlotArea(30, 20, 200, 200);
  3. 添加图层(可选):c->addBarLayer(...);
  4. 设置坐标参数:c->xAxis()->setLabels(...); c->yAxis()->setLabels(...);

下一篇讲述Simple Bar Chart的使用。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏Google Dart

Flutte部件目录-基本部件(一)

一个容器首先用padding包围子组件(由decoration中出现的所有边框填满),然后将附加constraints应用于填充范围(将width和height...

45020
来自专栏猿说1024

Markdown 语法

16940
来自专栏iOS技术

iOS 无侵入实现段落样式控制(解决富文本单行显示中文问题)

在iOS开发中,文本格式(富文本)处理是一个比较麻烦的问题(我们姑且说它是麻烦的)。这里我提两点比较蛋疼的地方:

30240
来自专栏Java3y

AJAX应用【股票案例、验证码校验】

股票案例 我们要做的是股票的案例,它能够无刷新地更新股票的数据。当鼠标移动到具体的股票中,它会显示具体的信息。 我们首先来看一下要做出来的效果: ? 服务器端分...

460100
来自专栏偏前端工程师的驿站

动手写个数字输入框1:input[type=number]的遗憾

前言  最近在用Polymer封装纯数字的输入框,开发过程中发现不少坑,也有很多值得研究的地方。本系列打算分4篇来叙述这段可歌可泣的踩坑经历: 《动手写个数字输...

29650
来自专栏十月梦想

CSS3动画animation

        animation和上次说的transform动画有点不同,需要进行定义动画规则,而animation则无需受体,自动执行动画,translat...

11030
来自专栏hbbliyong

Unity3D学习笔记第一课

第一课程: 1.Unity类名必须与文件名保持一致 2.讲属性设置为public可以在Unity中访问 public float speed; // ...

39270
来自专栏Google Dart

Flutter 构建完整应用手册-动画 顶

作为UI开发人员,我们经常需要在屏幕上显示和隐藏元素。 但是,在屏幕上或屏幕外快速弹出元素会让最终用户感到不安。 相反,我们可以使用不透明动画淡入淡出元素,以创...

12420
来自专栏C语言及其他语言

【程序源码】猜拳游戏

关注我们 今天来给大家来一段游戏源码(猜拳游戏) ? 程序截图如上。话不多说,上源码!! #include <stdio.h> #include <stdlib...

38060
来自专栏华章科技

10个非常实用的Excel技巧

Excel可以说是MS Office系列中最神奇也最重要的软件。对于专业的职场人士,工作中经常需要用到Excel来分析数据。亲们别再傻傻地用鼠标点来点去啦,用这...

16980

扫码关注云+社区

领取腾讯云代金券