QCustomplot使用分享(二) 源码解读

28 篇文章 1 订阅
18 篇文章 1 订阅

一、头文件概述

从这篇文章开始,我们将正式的进入到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所示

customPlot->legend->setVisible(true);
 
// 生成2种随机的蜡烛图数据,第一个是蜡烛图数据,第二个是美国线数据
int n = 500;
QVector<double> time(n), value1(n), value2(n);
QDateTime start = QDateTime(QDate(2014, 6, 11));
start.setTimeSpec(Qt::UTC);
double startTime = start.toTime_t();
double binSize = 3600*24; // 1天的数据
time[0] = startTime;
value1[0] = 60;
value2[0] = 20;
qsrand(9);//生成随机数时给指定的种子,那么生成的随机数都是相同的,因此每次运行后得到的结果都是不变的
for (int i=1; i<n; ++i)
{
  time[i] = startTime + 3600*i;
  value1[i] = value1[i-1] + (qrand()/(double)RAND_MAX-0.5)*10;
  value2[i] = value2[i-1] + (qrand()/(double)RAND_MAX-0.5)*3;
}
 
// 初始化一个蜡烛图指针:
QCPFinancial *candlesticks = new QCPFinancial(customPlot->xAxis, customPlot->yAxis);
candlesticks->setName("Candlestick");
candlesticks->setChartStyle(QCPFinancial::csCandlestick);//设置图表类型为蜡烛图
candlesticks->data()->set(QCPFinancial::timeSeriesToOhlc(time, value1, binSize, startTime));//设置数据
candlesticks->setWidth(binSize*0.9);//设置每一个数据项的绘制宽度
candlesticks->setTwoColored(true);//设置是否显示两种颜色
candlesticks->setBrushPositive(QColor(245, 245, 245));//设置收>开画刷
candlesticks->setBrushNegative(QColor(40, 40, 40));//设置收<开画刷
candlesticks->setPenPositive(QPen(QColor(0, 0, 0)));//设置收>开画笔
candlesticks->setPenNegative(QPen(QColor(0, 0, 0)));//设置收>开画笔
 
// 初始化一个美国线图指针:
QCPFinancial *ohlc = new QCPFinancial(customPlot->xAxis, customPlot->yAxis);
ohlc->setName("OHLC");
ohlc->setChartStyle(QCPFinancial::csOhlc);//设置图表类型为美国线
ohlc->data()->set(QCPFinancial::timeSeriesToOhlc(time, value2, binSize/3.0, startTime)); //为了区分于蜡烛图显示,
ohlc->setWidth(binSize*0.2);
ohlc->setTwoColored(true);
 
// 创建一个坐标轴矩形
QCPAxisRect *volumeAxisRect = new QCPAxisRect(customPlot);
customPlot->plotLayout()->addElement(1, 0, volumeAxisRect);
volumeAxisRect->setMaximumSize(QSize(QWIDGETSIZE_MAX, 100));
volumeAxisRect->axis(QCPAxis::atBottom)->setLayer("axes");
volumeAxisRect->axis(QCPAxis::atBottom)->grid()->setLayer("grid");
// 设置自己构造的坐标轴矩形属性
customPlot->plotLayout()->setRowSpacing(0);
volumeAxisRect->setAutoMargins(QCP::msLeft|QCP::msRight|QCP::msBottom);
volumeAxisRect->setMargins(QMargins(0, 0, 0, 0));
// 生成两种颜色的柱状图
customPlot->setAutoAddPlottableToLegend(false);//是否自动生成图例
QCPBars *volumePos = new QCPBars(volumeAxisRect->axis(QCPAxis::atBottom), volumeAxisRect->axis(QCPAxis::atLeft));
QCPBars *volumeNeg = new QCPBars(volumeAxisRect->axis(QCPAxis::atBottom), volumeAxisRect->axis(QCPAxis::atLeft));
for (int i=0; i<n/5; ++i)
{
  int v = qrand()%20000+qrand()%20000+qrand()%20000-10000*3;
  (v < 0 ? volumeNeg : volumePos)->addData(startTime+3600*5.0*i, qAbs(v)); //构造随机数据
}
volumePos->setWidth(3600*4);
volumePos->setPen(Qt::NoPen);
volumePos->setBrush(QColor(100, 180, 110));
volumeNeg->setWidth(3600*4);
volumeNeg->setPen(Qt::NoPen);
volumeNeg->setBrush(QColor(180, 90, 90));
 
// 设置自己构造的坐标轴矩形的x轴和QCustomPlot中的坐标轴矩形(默认的会生成一个)x轴同步,两个坐标轴永远显示的坐标范围是一样的
connect(customPlot->xAxis, SIGNAL(rangeChanged(QCPRange)), volumeAxisRect->axis(QCPAxis::atBottom), SLOT(setRange(QCPRange)));
connect(volumeAxisRect->axis(QCPAxis::atBottom), SIGNAL(rangeChanged(QCPRange)), customPlot->xAxis, SLOT(setRange(QCPRange)));
// 构造一个新的坐标轴刻度计算类
QSharedPointer<QCPAxisTickerDateTime> dateTimeTicker(new QCPAxisTickerDateTime);
dateTimeTicker->setDateTimeSpec(Qt::UTC);
dateTimeTicker->setDateTimeFormat("dd. MMMM");
volumeAxisRect->axis(QCPAxis::atBottom)->setTicker(dateTimeTicker);//赋予自己构造的坐标轴矩形的x轴一个新的刻度计算类
volumeAxisRect->axis(QCPAxis::atBottom)->setTickLabelRotation(15);
customPlot->xAxis->setBasePen(Qt::NoPen);
customPlot->xAxis->setTickLabels(false);//不显示坐标轴文本
customPlot->xAxis->setTicks(false); //  不显示坐标轴  (这个接口实现的不友好,后续文章我会具体说到)
customPlot->xAxis->setTicker(dateTimeTicker);//赋予默认的坐标轴矩形的x轴一个新的刻度计算类
customPlot->rescaleAxes();
customPlot->xAxis->scaleRange(1.025, customPlot->xAxis->range().center());
customPlot->yAxis->scaleRange(1.1, customPlot->yAxis->range().center());
 
// 设置两个坐标轴矩形左右对齐
QCPMarginGroup *group = new QCPMarginGroup(customPlot);
customPlot->axisRect()->setMarginGroup(QCP::msLeft|QCP::msRight, group);
volumeAxisRect->setMarginGroup(QCP::msLeft|QCP::msRight, group);

图3 蜡烛图运行示意图

三、示例下载

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

四、相关文章

QCustomplot使用分享(一) 能做什么事


如果您觉得文章不错,不妨给个 打赏,写作不易,感谢各位的支持。您的支持是我最大的动力,谢谢!!!




很重要–转载声明

  1. 本站文章无特别说明,皆为原创,版权所有,转载时请用链接的方式,给出原文出处。同时写上原作者:朝十晚八 or Twowords

  2. 如要转载,请原文转载,如在转载时修改本文,请事先告知,谢绝在转载时通过修改本文达到有利于转载者的目的。


评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值