qt柱状图控件设计

其他推荐内容：

• qt电池控件设计：https://blog.csdn.net/weixin_42887343/article/details/113932145
• QWidget控件拖动：https://blog.csdn.net/weixin_42887343/article/details/114384324
• QWidget控件旋转方法：https://blog.csdn.net/weixin_42887343/article/details/115037420
• qt淡化提示框设计：https://blog.csdn.net/weixin_42887343/article/details/109303972
• qt之led(点阵)控件类设计：https://blog.csdn.net/weixin_42887343/article/details/115348953

1、效果满上

2、设计思路

继承QWidget控件类，重写paintEvent绘制事件函数，按照设置的数值绘制柱状图。

3、控件代码

h文件

#ifndef BarCharWidget_H
#define BarCharWidget_H

#include <QWidget>
#include <QPainter>

class BarCharWidget : public QWidget
{
    Q_OBJECT
public:
    explicit BarCharWidget(QWidget *parent = nullptr);

    void setValue(float value);
    float getValue();
    void setText(const QString &text);
signals:
public slots:
private:
    float mValue = 0;	
    QString mText;
    void paintEvent(QPaintEvent *paintEvent) override;
};
#endif // BarCharWidget_H

cpp文件

#include "barcharwidget.h"

BarCharWidget::BarCharWidget(QWidget *parent) : QWidget(parent)
{
}
void BarCharWidget::setValue(float value)
{
    mValue = value;
    this->update();
}

float BarCharWidget::getValue()
{
    return mValue;
    this->update();
}

void BarCharWidget::setText(const QString &text)
{
    mText = text;
}

void BarCharWidget::paintEvent(QPaintEvent *paintEvent)
{
    Q_UNUSED(paintEvent);
    QPainter painter(this);

    // 进度条最大高度
    float sliderMaxValue = this->height() * 0.9;

    //进度条高度
    float sliderHigh  = -this->height() * 0.8;

    //进度条宽度
    const int sliderWidth = 60;

    // 将坐标系的该点变成原点坐标
    painter.translate(this->width() * 0.3, sliderMaxValue);

    // 画进度值
    painter.setBrush(Qt::black);
    painter.drawText(sliderWidth - 40, sliderHigh - 10, QString::number(mValue,'f',2));
    painter.drawText(5, 30, mText);

    // 设置画笔为红色
    QPen pen(Qt::white, 2, Qt::SolidLine, Qt::RoundCap, Qt::RoundJoin);
    painter.setPen(pen);

    // 画上面直线
    painter.drawLine(0, sliderHigh, sliderWidth, sliderHigh);
    // 画下面直线
    painter.drawLine(0, 0, sliderWidth, 0);
    // 画左边直线
    painter.drawLine(0, 0, 0, sliderHigh);
    // 画右边直线
    painter.drawLine(sliderWidth, 0, sliderWidth, sliderHigh);
    // 画上面直线线
    painter.drawLine(0, sliderHigh, sliderWidth, sliderHigh);

    //将矩形填充为白色
    QPolygon polyGon;
    polyGon<<QPoint(sliderWidth, 0);
    polyGon<<QPoint(sliderWidth, sliderHigh);
    polyGon<<QPoint(0, sliderHigh);
    polyGon<<QPoint(0, 0);
    painter.setBrush(Qt::white);
    painter.drawConvexPolygon(polyGon);

    //设置渐变
    QLinearGradient linerGradient = QLinearGradient(0, 0, 0, sliderHigh);
    linerGradient.setColorAt(0.0, Qt::cyan);
    linerGradient.setColorAt(0.3, Qt::green);
    linerGradient.setColorAt(0.7, Qt::yellow);
    linerGradient.setColorAt(1.0, Qt::red);

    QBrush brush(linerGradient);
    painter.setBrush(brush);

    painter.drawRect(QRectF(0, 0, sliderWidth, sliderHigh * mValue / 100));
    painter.end();
}

4、使用方法
使用界面提升的方式添加该柱状图控件。
demo核心代码如下（mainwindows构造函数中添加）：

    ui->widget->setText("柱状图1");
    ui->widget->setValue(0);
    
    ui->widget_2->setText("柱状图2");
    ui->widget_2->setValue(25);
    
    mTime.start(10);
    connect(&mTime,QTimer::timeout,this,[=](){
        if(ui->widget_2->getValue() >= 99.9)
        {
            mTime.stop();
            return 0;
        }
        ui->widget_2->setValue(ui->widget_2->getValue()+0.1);
        ui->widget->setValue(ui->widget->getValue()+0.1);
    });