阅读目录

  • 一、头文件概述
  • 二、一个简单的示例
  • 三、示例下载
  • 四、相关文章
回到顶部

一、头文件概述

从这篇文章开始,我们将正式的进入到QCustomPlot的实践学习中来,首先我们先来学习下QCustomPlot的类图,如果下载了QCustomPlot源码的同学可以自己去QCustomPlot的目录下documentation/qcustomplot下寻找一个名字叫做index.html的文件,将其在浏览器中打开,也是可以找到这个库的类图。如图1所示,是组成一个QCustomPlot类图的可能组成形式。

  1. 一个图表(QCustomPlot):包含一个或者多个图层、一个或多个item(用于展示一些固定的元素,例如文本、线段等)、一个或者多个可以绘制的元素、一个布局
  2. 一个图层(QCPLayer):包含基本的元素(QCPLayerable)
  3. 一个QCPAbstractItem:包含一个或者多个位置信息
  4. 一个坐标轴矩形(QCPAxisRect):包含多个坐标轴、有一个图例类(多个图例项)

图1 图表组成

在一个QCustomPlot类图中最重要、用的最多的是QCPLayerable元素,几乎除了QCPLayer以外的元素都是继承于该类。

  1. QCPAbstractPlottable:绘图元素,包含:折线图(QCPGraph)、曲线图(QCPCurve)、柱状图(QCPBars)、QCPStatiBox(盒子图)、QCPColorMap(色谱图)、QCPFinancial(金融图)
  2. QCPAbstractItem:标示项,包含:直线(QCPItemStraightLine)、线段(QCPItemLine)、曲线(QCPItemCurve)、矩形(QCPItemRect)、椭圆(QCPItemEllipse)、文本(QCPItemText)、小圆球(QCPItemTracer)、图片(QCPItemPixmap)、括弧(QCPItemBracket)
  3. 布局项(QCPLayoutElement):布局项(QCPAbstractLegendItem)、坐标轴矩形(QCPAxisRect)
  4. 网格线(QCPGrid):每一个坐标轴对应一个网格线
  5. 坐标轴(QCPAxis):一个坐标轴矩形包含四个坐标轴,上下左右四个坐标轴。

图2 可以绘制元素类图

回到顶部

二、一个简单的示例

如下代码是一个简单的蜡烛图代码,源码我是从官方网站上扒下来的,只是为了让大家有一个初步的了解,本来是英文的注释我换成了中文,然后添加了我自己个人的一些理解,运行结果如图3所示

 1 customPlot->legend->setVisible(true);2  3 // 生成2种随机的蜡烛图数据,第一个是蜡烛图数据,第二个是美国线数据4 int n = 500;5 QVector<double> time(n), value1(n), value2(n);6 QDateTime start = QDateTime(QDate(2014, 6, 11));7 start.setTimeSpec(Qt::UTC);8 double startTime = start.toTime_t();9 double binSize = 3600*24; // 1天的数据
10 time[0] = startTime;
11 value1[0] = 60;
12 value2[0] = 20;
13 qsrand(9);//生成随机数时给指定的种子,那么生成的随机数都是相同的,因此每次运行后得到的结果都是不变的
14 for (int i=1; i<n; ++i)
15 {
16   time[i] = startTime + 3600*i;
17   value1[i] = value1[i-1] + (qrand()/(double)RAND_MAX-0.5)*10;
18   value2[i] = value2[i-1] + (qrand()/(double)RAND_MAX-0.5)*3;
19 }
20
21 // 初始化一个蜡烛图指针:
22 QCPFinancial *candlesticks = new QCPFinancial(customPlot->xAxis, customPlot->yAxis);
23 candlesticks->setName("Candlestick");
24 candlesticks->setChartStyle(QCPFinancial::csCandlestick);//设置图表类型为蜡烛图
25 candlesticks->data()->set(QCPFinancial::timeSeriesToOhlc(time, value1, binSize, startTime));//设置数据
26 candlesticks->setWidth(binSize*0.9);//设置每一个数据项的绘制宽度
27 candlesticks->setTwoColored(true);//设置是否显示两种颜色
28 candlesticks->setBrushPositive(QColor(245, 245, 245));//设置收>开画刷
29 candlesticks->setBrushNegative(QColor(40, 40, 40));//设置收<开画刷
30 candlesticks->setPenPositive(QPen(QColor(0, 0, 0)));//设置收>开画笔
31 candlesticks->setPenNegative(QPen(QColor(0, 0, 0)));//设置收>开画笔
32
33 // 初始化一个美国线图指针:
34 QCPFinancial *ohlc = new QCPFinancial(customPlot->xAxis, customPlot->yAxis);
35 ohlc->setName("OHLC");
36 ohlc->setChartStyle(QCPFinancial::csOhlc);//设置图表类型为美国线
37 ohlc->data()->set(QCPFinancial::timeSeriesToOhlc(time, value2, binSize/3.0, startTime)); //为了区分于蜡烛图显示,
38 ohlc->setWidth(binSize*0.2);
39 ohlc->setTwoColored(true);
40
41 // 创建一个坐标轴矩形
42 QCPAxisRect *volumeAxisRect = new QCPAxisRect(customPlot);
43 customPlot->plotLayout()->addElement(1, 0, volumeAxisRect);
44 volumeAxisRect->setMaximumSize(QSize(QWIDGETSIZE_MAX, 100));
45 volumeAxisRect->axis(QCPAxis::atBottom)->setLayer("axes");
46 volumeAxisRect->axis(QCPAxis::atBottom)->grid()->setLayer("grid");
47 // 设置自己构造的坐标轴矩形属性
48 customPlot->plotLayout()->setRowSpacing(0);
49 volumeAxisRect->setAutoMargins(QCP::msLeft|QCP::msRight|QCP::msBottom);
50 volumeAxisRect->setMargins(QMargins(0, 0, 0, 0));
51 // 生成两种颜色的柱状图
52 customPlot->setAutoAddPlottableToLegend(false);//是否自动生成图例
53 QCPBars *volumePos = new QCPBars(volumeAxisRect->axis(QCPAxis::atBottom), volumeAxisRect->axis(QCPAxis::atLeft));
54 QCPBars *volumeNeg = new QCPBars(volumeAxisRect->axis(QCPAxis::atBottom), volumeAxisRect->axis(QCPAxis::atLeft));
55 for (int i=0; i<n/5; ++i)
56 {
57   int v = qrand()%20000+qrand()%20000+qrand()%20000-10000*3;
58   (v < 0 ? volumeNeg : volumePos)->addData(startTime+3600*5.0*i, qAbs(v)); //构造随机数据
59 }
60 volumePos->setWidth(3600*4);
61 volumePos->setPen(Qt::NoPen);
62 volumePos->setBrush(QColor(100, 180, 110));
63 volumeNeg->setWidth(3600*4);
64 volumeNeg->setPen(Qt::NoPen);
65 volumeNeg->setBrush(QColor(180, 90, 90));
66
67 // 设置自己构造的坐标轴矩形的x轴和QCustomPlot中的坐标轴矩形(默认的会生成一个)x轴同步,两个坐标轴永远显示的坐标范围是一样的
68 connect(customPlot->xAxis, SIGNAL(rangeChanged(QCPRange)), volumeAxisRect->axis(QCPAxis::atBottom), SLOT(setRange(QCPRange)));
69 connect(volumeAxisRect->axis(QCPAxis::atBottom), SIGNAL(rangeChanged(QCPRange)), customPlot->xAxis, SLOT(setRange(QCPRange)));
70 // 构造一个新的坐标轴刻度计算类
71 QSharedPointer<QCPAxisTickerDateTime> dateTimeTicker(new QCPAxisTickerDateTime);
72 dateTimeTicker->setDateTimeSpec(Qt::UTC);
73 dateTimeTicker->setDateTimeFormat("dd. MMMM");
74 volumeAxisRect->axis(QCPAxis::atBottom)->setTicker(dateTimeTicker);//赋予自己构造的坐标轴矩形的x轴一个新的刻度计算类
75 volumeAxisRect->axis(QCPAxis::atBottom)->setTickLabelRotation(15);
76 customPlot->xAxis->setBasePen(Qt::NoPen);
77 customPlot->xAxis->setTickLabels(false);//不显示坐标轴文本
78 customPlot->xAxis->setTicks(false); //  不显示坐标轴  (这个接口实现的不友好,后续文章我会具体说到)
79 customPlot->xAxis->setTicker(dateTimeTicker);//赋予默认的坐标轴矩形的x轴一个新的刻度计算类
80 customPlot->rescaleAxes();
81 customPlot->xAxis->scaleRange(1.025, customPlot->xAxis->range().center());
82 customPlot->yAxis->scaleRange(1.1, customPlot->yAxis->range().center());
83
84 // 设置两个坐标轴矩形左右对齐
85 QCPMarginGroup *group = new QCPMarginGroup(customPlot);
86 customPlot->axisRect()->setMarginGroup(QCP::msLeft|QCP::msRight, group);
87 volumeAxisRect->setMarginGroup(QCP::msLeft|QCP::msRight, group);

图3 蜡烛图运行示意图

回到顶部

三、示例下载

关于QCustomPlot的系列讲解,我可能会分为7篇文章来分别介绍,分别是QCustomplot使用分享(二) 源码解读、QCustomplot使用分享(三) 图   折线、参数曲线、蜡烛图、柱状图、面积图、QCustomplot使用分享(四) QCPAbstractItem、QCustomplot使用分享(五) 布局、QCustomplot使用分享(六) 坐标轴  网格线和QCustomplot使用分享(七) 层。等到图层讲完之后我会放出一个最终的demo,供大家下载。。。

回到顶部

四、相关文章

QCustomplot(一) 能做什么事

转载于:https://www.cnblogs.com/guaiweihudou/p/10761672.html

QCustomplot(二) 源码解读相关推荐

  1. qcustomplot圆_QCustomplot使用分享(二) 源码解读

    一.头文件概述 从这篇文章开始,我们将正式的进入到QCustomPlot的实践学习中来,首先我们先来学习下QCustomPlot的类图,如果下载了QCustomPlot源码的同学可以自己去QCusto ...

  2. Alamofire源码解读系列(十二)之请求(Request)

    本篇是Alamofire中的请求抽象层的讲解 前言 在Alamofire中,围绕着Request,设计了很多额外的特性,这也恰恰表明,Request是所有请求的基础部分和发起点.这无疑给我们一个Req ...

  3. 【 非线性回归 Logistics-Regression 模块实现与源码解读 深度学习 Pytorch笔记 B站刘二大人(5/10)】

    非线性回归 Logistics-Regression 模块实现与源码解读 深度学习 Pytorch笔记 B站刘二大人(5/10) 数学推导 什么是logistics函数 在定义上Logistic函数或 ...

  4. Bert系列(二)——源码解读之模型主体

    本篇文章主要是解读模型主体代码modeling.py.在阅读这篇文章之前希望读者们对bert的相关理论有一定的了解,尤其是transformer的结构原理,网上的资料很多,本文内容对原理部分就不做过多 ...

  5. redis源码解读二

    上一篇解读了一下SDS,本来觉得完了,但之后想想感觉少点什么,现在我们从使用的角度去梳理一下,大家想想对于字符串, 我们经常使用的有哪几个方法呢?这些方法又是怎么实现的? 在研究上面的几个方法之前我们 ...

  6. print python 带回车_python标准库threading源码解读【二】

    紧接着上一篇文章继续解析源码 甘蔗:python标准库threading源码解读[一]​zhuanlan.zhihu.com 目录 Event的介绍和用法 Event源码解析 以后的内容尽量少一点并且 ...

  7. x264源码解读(二)- VCL和NAL那些事

    目录 ANNEXB vs. AVCC VCL vs. NAL signal函数响应键盘事件 收尾清理工作 x264的编码 ANNEXB vs. AVCC 今天我们继续来说一下x264结构中非常重要的属 ...

  8. Bert系列(三)——源码解读之Pre-train

    https://www.jianshu.com/p/22e462f01d8c pre-train是迁移学习的基础,虽然Google已经发布了各种预训练好的模型,而且因为资源消耗巨大,自己再预训练也不现 ...

  9. nodeJS之eventproxy源码解读

    1.源码缩影 !(function (name, definition) { var hasDefine = typeof define === 'function', //检查上下文环境是否为AMD ...

最新文章

  1. SpringMVC:注解@ControllerAdvice的工作原理
  2. 计算机internet服务,计算机基础与应用——04Internet上的信息服务.ppt
  3. 《深度探索C++对象模型》--7 站在对象模型的尖端
  4. 二分法——leetcode35. 搜索插入位置
  5. 7-174 两个有序链表序列的合并 (20 分)
  6. javascript中的常见事件
  7. Java基础知识强化23:Java中数据类型转换(面试题)
  8. Bootstrap 弹出框(Popover)插件
  9. 自动化测试===Macaca环境搭建,自我总结
  10. 把wasm反编译出来
  11. Vue上传文件之后显示文件内容
  12. 电脑连接ios开发配置
  13. 毕设:后台管理系统基础模板
  14. 包误差率(PER)与BER相关
  15. 深入理解计算机系统 csapp 家庭作业(第三章完整版)
  16. 手机显示DNS服务器异常,手机dns服务器异常怎么设置
  17. 代码分享:面波数据快速成图
  18. 在线制作banner的网站
  19. 重新试用了office与wps.感觉这次wps好多了.
  20. [python]matplotlib.pyplot模块

热门文章

  1. 10个超高质量Python数据分析公众号!
  2. 最简单 便捷的开发工具 IDEA 下载包,视频安装 插件 破解码
  3. Joe Ross 交易书籍 中英文名
  4. SAP MM模块 工厂级货源清单管理
  5. java程序设计计算机二级,计算机二级Java程序设计真题及答案
  6. 合同诈骗案立案标准是怎样的
  7. 捷足先登学用CSS:HTML结构化
  8. [基本功]pytorch基本操作教程
  9. 「汇编」加深理解段地址*10H(*16)必须是16的倍数
  10. 如何设置无需fn直接按F1~F10