QCustomPlot (一) 画一个简单正弦曲线

QCustomPlot配置可以参考QCustomplot（零）QCustomPlot官方Demo使用。简单来说就是两步：

添加QCustomPlot源文件和头文件
ui界面文件中添加QWidget并提升为QCustomPlot

PS：如果你使用的是QT5，需要加上printsupport模块，方法是：QT +=printsupport。话不多说，开始画图吧！

一、配置QCustomPlot类环境

以下的配置是QT5版本的配置过程。

1.1 新建工程并添加printsupport

按默认的一直按下去就好了。在pro文件中找到QT变量，在QWidget后面加上printsupport模块。

1.2 添加源文件和头文件

添加QCustomPlot类的头文件和源文件是必要的，拷贝qcustomplot.h和qcustomplot.cp文件到工程目录下（pro同级目录），右键工程选择Add Exsisting Files...将刚刚拷贝的两个文件纳入到工程树下：

如果你习惯用pro文件编辑，可以：在pro文件夹中找到SOURCES和HEADERS变量，增加两个文件qcustomplot.cpp qcustomplot.h，效果一样。

至此你的pro文件内容至少有以下红色圈圈的内容：

1.3 ui文件增加QWidget并提升成QCustomPlot

点开ui设计师界面，在Container里面找到Widget，这个空间将会作为画图区域，按照需要调整大小:

这样一来只剩下最后一步，将QWidget提升成QCustomPlot。方法是右键QWidget在弹出的窗口中选择promote，选择QCustomPlot头文件路径及类名称后点击提升，至此QCustomPlot配置已经全部配置完成。

二、QCustomPlot几个重要的类

先掌握几个术语： plot 绘制 graph 曲线图 legend 曲线备注 axis（axes）轴。PS：构造一个默认的QCustomPlot通常会有几个预定义好的对象，方便我们快速更改我们的绘图外观：

2.1 QCPGraph 曲线

QCPGraph表示一个曲线，常见的方法有：

QCustomPlot::addGraph 增加一个曲线（一个曲线就需要手动addGraph）；
QCustomPlot::graph 获得曲线实例；
setData/addData 设置/增加曲线数据；
setName 设置曲线名称，会在Legend显示的时候用到；
rescaleAxes 根据当前数据调整轴范围；（很有用啊）
data 返回一个指向曲线数据的指针，可用于直接修改数据；

注意：QCPGraph只能用于一对一的数据，椭圆的曲线方程就不是一对一的，这时候你需要用到另一个类：QCPCurve

借助一些辅助类，你可以描述和控制曲线的表现。

setLineStyle 线型，接受一个enum QCP::LineStyle控制线形，可以看附图1；
setScatterStyle 散点型，接受一个enum QCPScatterStyle::ScatterShape控制散点形状，可以看附图2；
setPen 设置绘制方法，接受一个enum Qt::pen控制绘制线时候的外观，如虚线、颜色、宽度、笔划之间的连接方法，详细可见Qt::pen，附录3。
setBrush 设置曲线与坐标轴填充方法，接受一个enum Qt::BrushStyle，见附图4，详细可见Qt::Brush；

2.2 QCPAxisRect （矩形）轴

表示轴系统上的所有设置，如刻度，范围等。一般来说我们不需要直接构造这样一个轴，因为QCustomPlot已经默认构造了四个轴，分别位于上（QCustomPlot::xAxis2）下（QCustomPlot::xAxis1）左（QCustomPlot::yAxis）右（QCustomPlot::yAxis2）四个方位，默认显示左下两个轴。我们可以设置轴上的表现：

标签之间的空白也可以进行控制：

2.3 QCPLegend 图线说明

QCustomPlot默认有成员QCustomPlot::legend实例(调用setVisible(true)显示)，一般不需要自己构造QCPLengend，通过这个类你可以控制曲线说明的大小、颜色等属性，好像没有找到位置，找到了再回来补充吧。

三、开始画图！

直接在mainwindow.h中画图了。我们的目标是画一个正弦曲线：

#include <cmath>
MainWindow::MainWindow(QWidget *parent): QMainWindow(parent), ui(new Ui::MainWindow)
{ui->setupUi(this);QVector<double> x,y;for(double xi=-2*M_PI;xi<2*M_PI;xi+=0.1){x.push_back(xi);y.push_back(sin(xi));}this->ui->qcw_show->addGraph(0);this->ui->qcw_show->graph(0)->setData(x,y);
}

运行后的结果如下：

上面的图有以下问题：

坐标系范围与数据不匹配。定义域应该是[−2π,2π][-2\pi,2\pi][−2π,2π]事实上只显示了[0,5][0,5][0,5]；值域是[−1,1][-1,1][−1,1]，事实上是[0,5][0,5][0,5]
坐标轴没有名称
曲线没有名称

让这个曲线调整最佳轴属性（如范围、单位长度等）

this->ui->qcw_show->graph(0)->rescaleAxes();//立即适应当前数据

曲线显示图说明、轴标签

for(double xi=-2*M_PI;xi<2*M_PI;xi+=0.1)
{x.push_back(xi);y.push_back(sin(xi));
}
this->ui->qcw_show->addGraph(0);
this->ui->qcw_show->graph(0)->setData(x,y);
this->ui->qcw_show->graph(0)->setName("y=sin(
this->ui->qcw_show->rescaleAxes(true);
this->ui->qcw_show->xAxis->setLabel("X");
this->ui->qcw_show->yAxis->setLabel("Y");
this->ui->qcw_show->legend->setVisible(true);

最终的效果如下：

PS：QCustomPlot本身可以设置交互行为，如放大，缩小移动，选择曲线交互，方法是：customPlot->setInteractions(QCP::iRangeDrag | QCP::iRangeZoom | QCP::iSelectPlottables);。这个还蛮实用的，不妨试试！

附图1：

附图2

附图3