《Qt5+QCustomPlot绘制二维图表》

QCustomPlot 官网：https://www.qcustomplot.com/

打开QCustomPlot 官网可以看到很多绘制二维图表的例子

下载QCustomPlot资料

打开QCustomPlot 官网，点击download section

进入下载页面，下载最新版本的源码和实例，解压

绘制柱状图

1、打开Qt，创建一个Qt Widgets应用程序，取名为QCustomPlotTest，打开pro文件，由于使用到打印相关，所以需要加入printsupport，在原有的widgets 后面加入即可。

# Project created by QtCreator 2018-10-22T23:42:36
#
#-------------------------------------------------

QT       += core gui

greaterThan(QT_MAJOR_VERSION, 4): QT += widgets printsupport

TARGET = QCustomPlotTest
TEMPLATE = app

2、接着添加源码，把解压好的qcustomplot.cpp和qcustomplot.h拷贝到工程目录下，选择项目名称QCustomPlotTest，右键选择添加现有项，把qcustomplot.cpp和qcustomplot.h添加到项目

3、打开设计师界面，添加一个Widgets控件

4、选中Widgets控件，右键选择提升为...

5、添加的类名称为QCustomPlot，然后控件的objectName修改为qCustomPlot

6、添加头文件

#include "qcustomplot.h"

7、所有准备工作都完成后，就可以添加绘制柱状图代码了

#include "mainwindow.h"
#include "ui_mainwindow.h"

MainWindow::MainWindow(QWidget *parent) :
    QMainWindow(parent),
    ui(new Ui::MainWindow)
{
    ui->setupUi(this);

    //ui->qCustomPlot->addGraph();//添加图标
    ui->qCustomPlot->plotLayout()->insertRow(0);
    ui->qCustomPlot->plotLayout()->addElement(0, 0, new QCPTextElement(ui->qCustomPlot, "恋爱数据统计柱状图", QFont("微软雅黑",12, QFont::Bold)));


    // set dark background gradient设置暗背景梯度:
    QLinearGradient gradient(0, 0, 0, 400);
    gradient.setColorAt(0, QColor(90, 90, 90));
    gradient.setColorAt(0.38, QColor(105, 105, 105));
    gradient.setColorAt(1, QColor(70, 70, 70));
    ui->qCustomPlot->setBackground(QBrush(gradient));

    // create empty bar chart objects创建三个空的条形图对象:
    QCPBars *LoveTime = new QCPBars(ui->qCustomPlot->xAxis, ui->qCustomPlot->yAxis);//恋爱时间
    QCPBars *LoveTimes = new QCPBars(ui->qCustomPlot->xAxis, ui->qCustomPlot->yAxis2);//恋爱次数
    //将LatencyTime和ErrorTimes并排显示
    QCPBarsGroup *group = new QCPBarsGroup(ui->qCustomPlot);
    //group->append(LatencyTime);
    //group->append(ErrorTimes);
    LoveTime->setBarsGroup(group);
    LoveTimes->setBarsGroup(group);
    //设置抗锯齿
    LoveTime->setAntialiased(false); // gives more crisp, pixel aligned bar borders:提供更清晰，像素对齐的条形边框
    LoveTimes->setAntialiased(false);
    //设置叠加差距
    //LatencyTime->setStackingGap(1);
    //ErrorTimes->setStackingGap(1);
    //fossil->setStackingGap(1);
    // set names and colors设置名称和颜色:
    LoveTimes->setWidth(0.3);//设置宽度
    //ErrorTimes->setWidthType("wtPlotCoords");//wtAbsolute:wtAxisRectRatio:wtPlotCoords设置宽度
    LoveTimes->setName("恋爱次数");
    LoveTimes->setPen(QPen(QColor(250, 170, 20).lighter(150)));
    LoveTimes->setBrush(QColor(250, 170, 20));
    LoveTime->setWidth(0.3);//设置宽度
    //LatencyTime->setWidthType("wtPlotCoords");//wtAbsolute:wtAxisRectRatio:wtPlotCoords设置宽度
    LoveTime->setName("恋爱时间");
    LoveTime->setPen(QPen(QColor(0, 168, 140).lighter(130)));
    LoveTime->setBrush(QColor(0, 168, 140));
    // stack bars on top of each other把一个Bar叠加在另外一个Bar上面
    //ErrorTimes->moveAbove(fossil);
    //LatencyTime->moveAbove(ErrorTimes);

    //绘制xAxis
    QVector<double> ticks;
    QVector<QString> labels;
    ticks << 1 << 2 << 3 << 4 << 5 << 6 << 7<<8;
    labels << "X1" << "X2" << "X3" << "X5" << "X5" << "X6" << "X7"<<"X8";
    QSharedPointer<QCPAxisTickerText> textTicker(new QCPAxisTickerText);
    textTicker->addTicks(ticks, labels);
    ui->qCustomPlot->xAxis->setTicker(textTicker);//设置刻度标记CH
    ui->qCustomPlot->xAxis->setTickLabelRotation(60);//设置刻度标签旋转
    ui->qCustomPlot->xAxis->setSubTicks(false);//设置是否显示子刻度线
    ui->qCustomPlot->xAxis->setTickLength(0, 4);//设置标记的长度
    ui->qCustomPlot->xAxis->setRange(0, 9);//设置范围
    ui->qCustomPlot->xAxis->setBasePen(QPen(Qt::white));//设置轴基线颜色
    ui->qCustomPlot->xAxis->setTickPen(QPen(Qt::white));//设置刻度颜色
    ui->qCustomPlot->xAxis->grid()->setVisible(true);//网格可视
    ui->qCustomPlot->xAxis->grid()->setPen(QPen(QColor(130, 130, 130), 0, Qt::DotLine));//网格虚线
    ui->qCustomPlot->xAxis->setTickLabelColor(Qt::white);//设置刻度标签颜色
    ui->qCustomPlot->xAxis->setLabelColor(Qt::white);//设置轴标签的颜色

    // 绘制yAxis:
    ui->qCustomPlot->yAxis->setRange(0, 300);//设置轴范围的下限和上限
    ui->qCustomPlot->yAxis->setPadding(5); // 设置轴的填充a bit more space to the left border：在左边边界多留一点空间
    ui->qCustomPlot->yAxis->setLabel("恋爱时间(天)");
    ui->qCustomPlot->yAxis->setBasePen(QPen(Qt::white));//设置轴基线颜色
    ui->qCustomPlot->yAxis->setTickPen(QPen(Qt::white));//设置刻度线颜色
    ui->qCustomPlot->yAxis->setSubTickPen(QPen(Qt::white));//设置子刻度线颜色
    ui->qCustomPlot->yAxis->grid()->setSubGridVisible(true);//设置子网格可视
    ui->qCustomPlot->yAxis->setTickLabelColor(Qt::white);//设置刻度标签颜色
    ui->qCustomPlot->yAxis->setLabelColor(Qt::white);//设置轴标签的颜色
    ui->qCustomPlot->yAxis->grid()->setPen(QPen(QColor(130, 130, 130), 0, Qt::SolidLine));//设置网格颜色和线型，网格实线
    ui->qCustomPlot->yAxis->grid()->setSubGridPen(QPen(QColor(130, 130, 130), 0, Qt::DotLine));//设置子网格颜色和线型，网格虚线

    // 绘制yAxis2:
    ui->qCustomPlot->yAxis2->setRange(0, 21);//设置轴范围的下限和上限
    ui->qCustomPlot->yAxis2->setPadding(5); // 设置轴的填充a bit more space to the left border：在左边边界多留一点空间
    ui->qCustomPlot->yAxis2->setLabel("恋爱次数");
    ui->qCustomPlot->yAxis2->setBasePen(QPen(Qt::white));//设置轴基线颜色
    ui->qCustomPlot->yAxis2->setTickPen(QPen(Qt::white));//设置刻度线颜色
    ui->qCustomPlot->yAxis2->setSubTickPen(QPen(Qt::white));//设置子刻度线颜色
    ui->qCustomPlot->yAxis2->grid()->setSubGridVisible(true);//设置子网格可视
    ui->qCustomPlot->yAxis2->setTickLabelColor(Qt::white);//设置刻度标签颜色
    ui->qCustomPlot->yAxis2->setLabelColor(Qt::white);//设置轴标签的颜色
    ui->qCustomPlot->yAxis2->grid()->setPen(QPen(QColor(130, 130, 130), 0, Qt::SolidLine));//设置网格颜色和线型，网格实线
    ui->qCustomPlot->yAxis2->grid()->setSubGridPen(QPen(QColor(130, 130, 130), 0, Qt::DotLine));//设置子网格颜色和线型，网格虚线
    ui->qCustomPlot->yAxis2->setVisible(true);//默认为不可视，需要设置为可视
    // Add data添加数据:
    QVector<double> LoveTimesData, LoveTimeData;
    LoveTimesData << 1 << 2 << 3 << 4 << 5 << 6 << 7<<8;
    LoveTimeData   << 50 << 60 << 70 << 80 << 90 << 100 << 110<<120;
    LoveTimes->setData(ticks, LoveTimesData);//将容器内数据添加到对应刻度的点上，数量应相同
    LoveTime->setData(ticks, LoveTimeData);

    // setup legend设置说明图例:
    ui->qCustomPlot->legend->setVisible(true);//说明图例可视
    ui->qCustomPlot->axisRect()->insetLayout()->setInsetAlignment(0, Qt::AlignTop|Qt::AlignLeft);//AlignTop:顶端对齐，AlignHCenter:中心对齐
    ui->qCustomPlot->legend->setBrush(QColor(255, 255, 255, 100));
    ui->qCustomPlot->legend->setBorderPen(Qt::NoPen);//设置边框颜色
    QFont legendFont = font();//获取字体
    legendFont.setPointSize(10);//设置字体大小，必须大于0
    //legendFont.setStyleName(Qt::微软雅黑);

    ui->qCustomPlot->legend->setFont(legendFont);//设置默认字体
    //ui->qCustomPlot->setInteractions(QCP::iRangeDrag | QCP::iRangeZoom);//客户交互，界面可以移动
}

MainWindow::~MainWindow()
{
    delete ui;
}

显示效果图

完整代码

下载后打开可能需要先configure一下才能正常运行

百度网盘链接：https://pan.baidu.com/s/1O4MrlNneVfMXcnVRNUQJeQ
提取码：hrvf

《Qt5+QCustomPlot绘制二维图表》

下载QCustomPlot资料

绘制柱状图

显示效果图

完整代码

猜你喜欢