一个网站的制作特点视频直播网站开发运营步骤

本文详细介绍了qcustomplot绘制曲线图的流程，一段代码一段代码运行看效果。通过阅读本文，读者可以了解到每一项怎么用代码进行配置，进而实现自己想要的图表效果。（本文只针对曲线图）

1 最简单的图形（入门）

• 头文件

#ifndef WIDGET_H
#define WIDGET_H#include <QWidget>
#include "qcustomplot.h"
QT_BEGIN_NAMESPACE
namespace Ui { class Widget; }
QT_END_NAMESPACEclass Widget : public QWidget
{Q_OBJECTpublic:Widget(QWidget *parent = nullptr);~Widget();public:void paintLine(QCustomPlot *customPlot);private:Ui::Widget *ui;
};
#endif // WIDGET_H

• 源文件

#include "widget.h"
#include "ui_widget.h"Widget::Widget(QWidget *parent): QWidget(parent), ui(new Ui::Widget)
{ui->setupUi(this);paintLine(ui->lineWidget);}Widget::~Widget()
{delete ui;
}void Widget::paintLine(QCustomPlot *customPlot)
{QVector<double> x(101), y(101);for (int i = 0; i < x.size(); i++){x[i] = i / 50.0 - 1;    // x从-1 到 1y[i] = x[i] * x[i];   // 二次函数}customPlot->addGraph();    // 添加一幅折线图customPlot->graph(0)->setData(x, y);    // 为曲线图添加数据 注意这个方法只能是double类型 库内就是这样声明与定义的customPlot->graph(0)->setName("y=x^{2}");// 设置x与y坐标轴的范围customPlot->xAxis->setRange(-1, 1);customPlot->yAxis->setRange(0, 1);// 设置x与y坐标轴的标签customPlot->xAxis->setLabel("x");customPlot->yAxis->setLabel("y");// 显示图例customPlot->legend->setVisible(true);
}

• 运行效果

2 美化一下

美化之前，先有几个名词声明一下

• 轴线
• 轴刻度线（长的刻度线）
• 轴子刻度线（短的刻度线）
• 轴刻度值
• 轴标签

2.1 设置背景颜色、轴、刻度线、刻度值、刻度标签

    QLinearGradient plotGradient;plotGradient.setStart(0, 0);plotGradient.setFinalStop(0, 350);plotGradient.setColorAt(0, QColor(80, 80, 80));plotGradient.setColorAt(1, QColor(50, 50, 50));customPlot->setBackground(plotGradient);      // 设置背景颜色

customPlot->axisRect()->setBackground(Qt::red);

// 设置轴风格customPlot->xAxis->setBasePen(QPen(Qt::white, 1));

customPlot->xAxis->setTickPen(QPen(Qt::white, 1));    // 轴刻度线和画笔

注意这两张图像的区别，非常微小的区别

上边这张是设置轴，下边这张是设置轴刻度

customPlot->xAxis->setSubTickPen(QPen(Qt::white, 1));  // 轴子刻度线的画笔

发现区别了吗？发现具体配置的效果显示在哪了吗？如果没有发现，请仔细对比。

customPlot->xAxis->setTickLabelColor(Qt::white);  // 设置轴刻度颜色

    customPlot->xAxis->setLabel("标签");                  // 只有设置了标签，轴标签颜色才会显示customPlot->xAxis->setLabelColor(Qt::white);          // 设置轴标签颜色

    customPlot->xAxis->setTickLengthIn(133);   // 为了效果明显 将值设置的大一点，原来是这个效果 轴线内刻度的长度

customPlot->xAxis->setTickLengthOut(125);    // 为了效果明显 将值设置的大一点，原来是这个效果 轴线外刻度的长度

customPlot->xAxis->setUpperEnding(QCPLineEnding::esSpikeArrow); // 设置轴结束的箭头

	// 设置网格的风格customPlot->xAxis->grid()->setPen(QPen(Qt::red, 1, Qt::DotLine));

    // 设置水平线customPlot->yAxis->grid()->setPen(QPen(Qt::yellow, 1, Qt::DotLine));

    // 设置子刻度线customPlot->xAxis->grid()->setSubGridVisible(true);customPlot->xAxis->grid()->setSubGridPen(QPen(Qt::blue, 1, Qt::DotLine));

 	customPlot->yAxis->grid()->setSubGridVisible(true);customPlot->yAxis->grid()->setSubGridPen(QPen(Qt::green, 1, Qt::DashLine));

    // 设置刻度为0时的网格线的画笔customPlot->xAxis->grid()->setZeroLinePen(QPen(Qt::red, 3));customPlot->yAxis->grid()->setZeroLinePen(QPen(Qt::red));

至此，有关图像轴的设置就介绍完了

2.2 线型

利用官网的例子进行介绍

    // 图表的风格QPen pen;// 存放曲线的风格名称QStringList lineNames;lineNames << "lsNone" << "lsLine" << "lsStepLeft" << "lsStepRight" << "lsStrepCenter" << "lsImpulse";for(int i = 0; i < lineNames.size(); i++){customPlot->addGraph();pen.setColor(QColor(qSin(i * 1 + 1.2) * 80 + 80, qSin(i * 0.3) * 80 + 80, qSin(i * 0.3 + 1.5) * 80 + 80));customPlot->graph()->setPen(pen);customPlot->graph()->setName(lineNames.at(i));customPlot->graph()->setLineStyle((QCPGraph::LineStyle)i);customPlot->graph()->setScatterStyle(QCPScatterStyle(QCPScatterStyle::ssCircle, 6));QVector<double> x(15), y(15);for (int j = 0; j < x.size(); j++){x[j] = j / 15.0 * 5 * 3.14 + 0.01;y[j] = 7 * qSin(x[j]) / x[j]  - (i - QCPGraph::lsNone) * 5 + (QCPGraph::lsImpulse) * 5 + 2;}customPlot->graph()->setData(x, y);customPlot->graph()->rescaleAxes(true);}

本文参考：

https://blog.csdn.net/qq10097355/article/details/104845706https://www.qcustomplot.com/  官网