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

一、头文件概述

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

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

图1 图表组成

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

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

图2 可以绘制元素类图

二、一个简单的示例

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

 customPlot->legend->setVisible(true);

 // 生成2种随机的蜡烛图数据，第一个是蜡烛图数据，第二个是美国线数据

 int n = ;

 QVector<double> time(n), value1(n), value2(n);

 QDateTime start = QDateTime(QDate(, , ));

 start.setTimeSpec(Qt::UTC);

 double startTime = start.toTime_t();

 double binSize = *; // 1天的数据

 time[] = startTime;

 value1[] = ;

 value2[] = ;

 qsrand();//生成随机数时给指定的种子，那么生成的随机数都是相同的，因此每次运行后得到的结果都是不变的

 for (int i=; i<n; ++i)

 {

   time[i] = startTime + *i;

   value1[i] = value1[i-] + (qrand()/(double)RAND_MAX-0.5)*;

   value2[i] = value2[i-] + (qrand()/(double)RAND_MAX-0.5)*;

 }

 // 初始化一个蜡烛图指针:

 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(, , ));//设置收>开画刷

 candlesticks->setBrushNegative(QColor(, , ));//设置收<开画刷

 candlesticks->setPenPositive(QPen(QColor(, , )));//设置收>开画笔

 candlesticks->setPenNegative(QPen(QColor(, , )));//设置收>开画笔

 // 初始化一个美国线图指针:

 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(, , volumeAxisRect);

 volumeAxisRect->setMaximumSize(QSize(QWIDGETSIZE_MAX, ));

 volumeAxisRect->axis(QCPAxis::atBottom)->setLayer("axes");

 volumeAxisRect->axis(QCPAxis::atBottom)->grid()->setLayer("grid");

 // 设置自己构造的坐标轴矩形属性

 customPlot->plotLayout()->setRowSpacing();

 volumeAxisRect->setAutoMargins(QCP::msLeft|QCP::msRight|QCP::msBottom);

 volumeAxisRect->setMargins(QMargins(, , , ));

 // 生成两种颜色的柱状图

 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=; i<n/; ++i)

 {

   int v = qrand()%+qrand()%+qrand()%-*;

   (v <  ? volumeNeg : volumePos)->addData(startTime+*5.0*i, qAbs(v)); //构造随机数据

 }

 volumePos->setWidth(*);

 volumePos->setPen(Qt::NoPen);

 volumePos->setBrush(QColor(, , ));

 volumeNeg->setWidth(*);

 volumeNeg->setPen(Qt::NoPen);

 volumeNeg->setBrush(QColor(, , ));

 // 设置自己构造的坐标轴矩形的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();

 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使用分享(一) 能做什么事

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

很重要--转载声明

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

奋斗中的无名小卒。。。