ChartDirector应用笔记(二)

关于Simple Bar Chart

Simple bar chart是XYChart大类中的Bar chart类型中的最简单的例子。Bar chart的表现形式简单直观,在数据量较少、数据维度简单等场景下有较好的适用性。对于一个Bar chart,具有俩个重要的组成部分:XY坐标系,Bars。XY坐标具有坐标值、名称等属性,Bar之间具有颜色、间距、宽度等属性。下面的应用实例以Qt为基础,编写了一个简单的对话框程序,展示了ChartDirector类库和Qt结合的一般形式。

效果图

图表数据是随意添加的,添加了保存功能,目前只能保存为内置的文件名和文件格式。

关键代码解读

源代码主要分成两个部分:第一部分是主窗口布局,以XYChartDemo类为主;第二部分实现图表显示,以ImagePanel类为主。下面分别说明:

xychartdemo.h:XYChartDemo类继承自QDialog类,负责窗口绘制和显示。成员包含一个指向ImagePanel对象的指针,其他的成员主要用于窗口布局。

 1 class XYChartDemo : public QDialog
 2 {
 3     Q_OBJECT
 4 
 5 public:
 6     XYChartDemo(QWidget *parent = 0);
 7     ~XYChartDemo();
 8 
 9 private:
10     Ui::XYChartDemoClass ui;
11 
12     ImagePanel* m_panel;
13     QPushButton* m_quitBtn;
14     QPushButton* m_saveAsBtn;
15     QVBoxLayout* vlayout;
16     QHBoxLayout* m_layout;
17 };

xychartdemo.cpp:

 1 XYChartDemo::XYChartDemo(QWidget *parent)
 2     : QDialog(parent)
 3 {
 4     ui.setupUi(this);
 5 
 6     //setGeometry(40, 30 ,460, 310);
 7     setFixedSize(480, 310);
 8     
 9     m_quitBtn = new QPushButton("Quit");
10     m_saveAsBtn = new QPushButton("Save as...");
11 
12     m_layout = new QHBoxLayout;
13     m_panel = new ImagePanel;
14     m_layout->addWidget(m_panel, 1);
15 
16     vlayout = new QVBoxLayout;
17     vlayout->addWidget(m_quitBtn);
18     vlayout->addWidget(m_saveAsBtn);
19     vlayout->addStretch(1);
20     m_layout->addLayout(vlayout);
21     setLayout(m_layout);
22 
23     connect(m_quitBtn, SIGNAL(clicked()), this, SLOT(close()));
24     connect(m_saveAsBtn, SIGNAL(clicked()), m_panel, SLOT(onSaveAs()));
25 }
26 
27 XYChartDemo::~XYChartDemo()
28 {
29     delete m_panel;
30     delete m_quitBtn;
31     delete m_saveAsBtn;
32 
33     delete vlayout;  // the sublayout should be destroyed first.
34     delete m_layout;
35 }

构造函数首先对窗口组件进行初始化,添加好布局响应后设置了两个信号槽。第一个连接用于响应“quit”按钮,退出程序;第二个连接用于响应“保存”按钮,用户点击之后即将当前绘制的图表保存为指定格式。析构函数中对组件资源进行了释放,防止内存泄露。 imagepanel.h:

 1 class ImagePanel : public QWidget
 2 {
 3     Q_OBJECT
 4 
 5 public:
 6     ImagePanel(QWidget *parent = 0);
 7     ~ImagePanel();
 8 
 9 protected slots:
10     void onSaveAs();
11 
12 private:
13     QChartViewer* m_qViewer;
14     XYChart* m_chart;
15 };

ImagePanel类继承自QWidget类,用于图表显示。该类包含一个指向QChartViewer对象的指针和一个指向XYChart对象的指针。QChartViewer类在前面说过了,是一个继承自QLabel类的组件类,连接ChartDirector类库和Qt框架。再看看实现文件imagepanel.cpp:

 1 ImagePanel::ImagePanel(QWidget *parent)
 2     : QWidget(parent)
 3 {
 4     m_qViewer = new QChartViewer(this);
 5 
 6     const double data[] = {34, 56, 12, 58, 98};
 7     const char* lbels[] = {"Mon", "Tue", "Wed", "Thu", "Fri"};
 8 
 9     m_chart = new XYChart(400, 300);
10     m_chart->setPlotArea(35, 25, 335, 240);
11 
12     // set the color of bar.
13     BarLayer* blayer = m_chart->addBarLayer(DoubleArray(data, (int)(sizeof(data)/sizeof(data[0]))), 0xFF);
14     m_chart->xAxis()->setLabels(StringArray(lbels, (int)(sizeof(lbels)/sizeof(lbels[0]))));
15 
16     blayer->setBarGap(0.5);
17 
18     m_qViewer->setChart(m_chart);
19 }

如上一篇文件所说的那样,先分配一个XYChart对象。传递绘制区域(400, 300)作为参数调用XYChart的构造函数构造一个XYChart对象;然后调用setPlotArea设置好XY坐标系的位置的坐标区域。在该坐标区域内,可以绘制各种线条和图形。值得注意的是,X、Y轴上面的坐标值和坐标名并不属于PlotArea区域。调用addBarLayer()是一个较为重要的步骤,这里因为要绘制的是Bar chart, 所以使用了addBarLayer()。注意该函数的最后一个参数,0xFF指定了绘制出来的Bar的颜色。需要设定为其他颜色的Bar可以在这里设置。然后就是调用xAxis()等函数设置坐标参数,setChart()函数用于将chart对象设置到QChartViewer对象。这样,就可以在Qt窗口中看到ChartDirector绘制的图表了。

小结

总的来说,绘制过程还是比较简单的。当然,这个图表只是一个较为简单的例子,所以在流程上和代码上并无复杂性可言。本代码在编写过程中使用了VS2010作为编辑器,所以在调用ChartDirector的时候只需要在项目属性中设置好库的路径即可。另外,还需在主程序运行前指定加载lib文件:#pragma comment(lib, "chartdir51.lib")。最后,还需要加ChartDirector库的dll文件复制到生成的可执行文件所在的目录下才能运行,当然其他方法也是存在的。后续将陆续放出更为复杂的图表应用实例。

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

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏Golang语言社区

厚土Go学习笔记 | 03. 数学运算的随机数

总是要有使用随机数的情况。这就需要使用math包。 package main import( "fmt" "math/rand" ) fun...

32260
来自专栏大数据钻研

谷歌 HTML/CSS 规范

背景 这篇文章定义了 HTML 和 CSS 的格式和代码规范,旨在提高代码质量和协作效率。 ? 通用样式规范 协议 省略图片、样式、脚本以及其他媒体文件 URL...

50380
来自专栏个人随笔

实现Windows程序的数据更新

枚举是一组描述性的名称 定义一组有限的值,不包含方法 对可能的值进行约束 枚举是一组指定的常数,对可能的值进行约束 枚举使用时直观方便、更易于维护 pictur...

35680
来自专栏简书专栏

基于Excel2013的数据转换和清洗

数字可以被设成的格式有12种:常规、数值、货币、会计专用、日期、时间、百分比、分数、科学记数、文本、特殊、自定义

18220
来自专栏vue学习

17、将数据渲染到组件(列表渲染、模板语法、父子组件之间的传值)

(1)v-for语法 https://cn.vuejs.org/v2/guide/list.html 我们用 v-for 指令根据一组数组的选项列表进行渲染...

19810
来自专栏Linux驱动

26.QT-模型视图之自定义委托

由于模型负责组织数据,而视图负责显示数据,所以当用户想修改显示的数据时,就要通过视图中的委托来完成

16220
来自专栏日常学python

python爬虫常用库之BeautifulSoup详解

这是日常学python的第16篇原创文章 经过了前面几篇文章的学习,估计你已经会爬不少中小型网站了。但是有人说,前面的正则很难唉,学不好。正则的确很难,有人说...

29970
来自专栏前端杂货铺

typeof的一些兼容性问题

typeof存在一些兼容性的问题,在IE6,7,8中的DOM和BOM元素及其对象上的方法的判定会出现误差,在safari上对NodeList实例 的判定,对Ex...

359150
来自专栏瓜大三哥

matlab GUI基础1

GUI编程开发 1.句柄图形 是一种面向对象的绘图系统。这些细节一般隐藏在图形M文件的内部,用户通过句柄图形可以定制图形的许多特性,这是使用高级绘图函数无法实现...

31280
来自专栏阮一峰的网络日志

IntersectionObserver API 使用教程

网页开发时,常常需要了解某个元素是否进入了"视口"(viewport),即用户能不能看到它。 ? 上图的绿色方块不断滚动,顶部会提示它的可见性。 传统的实现方法...

41960

扫码关注云+社区

领取腾讯云代金券