Series Article Directory
提示：这里是该系列文章的所有文章的目录
Chapter 1: (1) Realization of QCustomPlot’s common property settings, multi-curve drawing, dynamic curve drawing, generation of cursors, rectangle zoom-in, etc. Chapter 2: (2)
QCustomPlot generates heat map/matrix color map
Chapter 3: (3) Qt+QCustomPlot generates bar charts (column charts) with up and down directions/different colors.
Chapter 4: (4) QCustomPlot column chart dynamic display example development
Article directory
foreword
This article mainly describes the use of QCustomPlot graphics library to draw bar graphs under Qt. The example implements a customized version of the bar graph. There are upward and downward bars, and different colors are displayed according to the interval. See the content of the article for the sample code. You can refer to it for study. If there are any mistakes, you are welcome to criticize and correct.
Project effect
提示：以下是本篇文章正文内容，下面案例可供参考
1. Improvement of QCustomPlot
This step is to add a widget control on the ui interface and upgrade it to the QCustomPlot class. The specific upgrade steps can be found in this blog: QCustomPlot common property setting, multi-curve drawing, dynamic curve drawing, cursor generation, rectangle enlargement and other functions are realized
2. Draw a histogram
The complete code of the example is shown here, see code comment
1.widget.h for details
#ifndef WIDGET_H
#define WIDGET_H
#include <QWidget>
#include "CustomPlot/qcustomplot.h"
QT_BEGIN_NAMESPACE
namespace Ui {
class Widget; }
QT_END_NAMESPACE
class Widget : public QWidget
{
Q_OBJECT
public:
Widget(QWidget *parent = nullptr);
~Widget();
void setBarCustomPlot(QCustomPlot *customPlot);
private slots:
void on_pb_Test_clicked();
private:
Ui::Widget *ui;
QCustomPlot *m_customPlot;
QCPItemText *maxLabel;
QCPItemText *minLabel;
};
#endif // WIDGET_H
2.widget.cpp
#include "widget.h"
#include "ui_widget.h"
Widget::Widget(QWidget *parent)
: QWidget(parent)
, ui(new Ui::Widget)
{
ui->setupUi(this);
}
Widget::~Widget()
{
delete m_customPlot;
delete ui;
}
void Widget::setBarCustomPlot(QCustomPlot *customPlot)
{
//设置背景黑色
customPlot->axisRect()->setBackground(QBrush(Qt::black));
//customPlot->setInteractions(QCP::iRangeDrag | QCP::iRangeZoom); //设置 可拖动,可放大缩小
//x轴设置
customPlot->xAxis->setVisible(true);
customPlot->xAxis->setTickLabels(false);
customPlot->xAxis->setSubTickLength(0);
customPlot->xAxis->setTickLength(0);
customPlot->xAxis->setRange(0,65);
//customPlot->xAxis->setPadding(10); //设置轴边距,默认最小为15,需要先修改源码qcustomplot.cpp(17598：setMinimumMargins)此处默认值
//customPlot->xAxis->grid()->setVisible(false); //设置网格是否显示
//customPlot->xAxis->grid()->setPen(QPen(Qt::white));
//x2轴设置
customPlot->xAxis2->setVisible(true);
customPlot->xAxis2->setTickLabels(false);
customPlot->xAxis2->setSubTickLength(0);
customPlot->xAxis2->setTickLength(0);
//y轴设置
customPlot->yAxis->setVisible(true);
customPlot->yAxis->setTickLabels(false);
customPlot->yAxis->setSubTickLength(0);
customPlot->yAxis->setTickLength(0);
customPlot->yAxis->setRange(-1.6,1.6);
customPlot->yAxis->ticker()->setTickCount(3);
customPlot->yAxis->grid()->setPen(QPen(Qt::white));
//y2轴设置
customPlot->yAxis2->setVisible(true);
customPlot->yAxis2->setTickLabels(false);
customPlot->yAxis2->setSubTickLength(0);
customPlot->yAxis2->setTickLength(0);
//设置文本框
maxLabel = new QCPItemText(customPlot); //在QCustomplot中新建文字框
maxLabel->position->setType(QCPItemPosition::ptAxisRectRatio); //位置类型
maxLabel->position->setCoords(0.96,0.18);
maxLabel->setText("1.00");
maxLabel->setColor(QColor(Qt::white)); //字体颜色
maxLabel->setFont(QFont(font().family(),8)); //字体大小
maxLabel->setBrush(QColor(Qt::red));
maxLabel->setPadding(QMargins(2,2,2,2)); //文字距离边框几个像素
minLabel = new QCPItemText(customPlot);
minLabel->position->setType(QCPItemPosition::ptAxisRectRatio);
minLabel->position->setCoords(0.96,0.82);
minLabel->setText("-1.00");
minLabel->setColor(QColor(Qt::white));
minLabel->setFont(QFont(font().family(),8));
minLabel->setBrush(QColor(Qt::red));
minLabel->setPadding(QMargins(2,2,2,2));
//绘制柱状图
QCPBars *bars = new QCPBars(customPlot->xAxis,customPlot->yAxis);
bars->setAntialiased(false); //为了更好的边框效果,关闭抗齿锯
bars->setPen(QPen(QColor(Qt::green).lighter(100))); //设置柱状图的边框颜色
bars->setWidth(1); //设置各柱之前无间隔
bars->setBrush(QColor(Qt::green)); //绿色
QVector<double> ticks1;
ticks1 << 0.5 << 2.5 << 3.5 << 4.5;
QVector<double> fossilData1;
fossilData1 << -1 << 0.1 << 0.8 << -0.2;
bars->setData(ticks1,fossilData1);
//bars->setBrush(QColor(Qt::yellow)); //黄色
QCPBars *bars2 = new QCPBars(customPlot->xAxis,customPlot->yAxis);
bars2->setAntialiased(false);
bars2->setPen(QPen(QColor(Qt::red).lighter(100)));
bars2->setWidth(1);
bars2->setBrush(QColor(Qt::red)); //红色
QVector<double> ticks2;
ticks2 << 1.5 << 5.5 << 6.5;
QVector<double> fossilData2;
fossilData2 << 2.5 << -1.5 << 1.2;
bars2->setData(ticks2,fossilData2);
}
void Widget::on_pb_Test_clicked()
{
m_customPlot = new QCustomPlot();
m_customPlot = ui->customplot;
setBarCustomPlot(m_customPlot);
m_customPlot->replot(QCustomPlot::rpQueuedReplot);
}
3. widget.ui see above.
Summarize
When writing the example in this article, when using customPlot->xAxis->setPadding(10), the axis margin cannot be modified. Later, I found that the default minimum value of the axis margin in the qcustomplot.cpp source code is 15. Therefore, In order to make the axis margin smaller, the default value in the source code needs to be modified (the example in this article is modified to setMinimumMargins(QMargins(5, 5, 5, 5)); //qcustomplot.cpp line 17598).
Here is a relatively simple customized version of column chart drawing, which is a small component that I need to use in project development. It also allows me to learn the usage of QCustomPlot graphics library to draw column charts. I hope it can help you .
The next article in this series: (4) Development of QCustomPlot histogram dynamic display example
hello:
Learn together and make progress together. If you still have related questions, you can leave a message in the comment area for discussion.