Qt实现自定义饼状统计图

最新推荐文章于 2024-08-24 21:49:50 发布
最新推荐文章于 2024-08-24 21:49:50 发布
阅读量2.7k 收藏 48
点赞数 10
分类专栏： QT c++ 文章标签： C++ QT gui
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_41151210/article/details/123949936
版权
c++ 同时被 2 个专栏收录
5 篇文章 1 订阅
订阅专栏
QT
4 篇文章 2 订阅
订阅专栏

       由于随着需求的多样化，个性化，Qt自带的原生控件QChart已经不能够满足我们的追求个性与美完美融合的过分要求。所以在闲暇时间把玩C艹, 自定义绘制了饼状统计图。该自定义控件实现了颜色自定义设置，鼠标悬浮突出显示该部分在全部数据的占比。话不多说，直接上效果图：   

bandicam

 一、绘制背景（即每个扇形区域）；

void CustomPieChart::drawValues(QPainter *painter)
{
    auto iter = m_valueMap.begin();
    QString key = "";
    qreal value = 0.0;
    qreal startAngle = 0.0;
    qreal angleLength = 0.0;
    for(;iter!=m_valueMap.end();iter++){
        key = iter.key();
        value = iter.value();
        angleLength = (value / m_total) * 360 - BLANK_W;
        gradientArc(painter, key, startAngle, angleLength, m_colorMap[key]);
        m_anglePairMap.insert(key, QPair<qreal, qreal>(startAngle, angleLength));
        startAngle += (angleLength + BLANK_W);
    }
}


void CustomPieChart::gradientArc(QPainter *painter, QString key, qreal startAngle, qreal angleLength, QColor color)
{
    qreal radius = m_valueStateMap.value(key)?m_radius+SUPERPLUS_H:m_radius;
    painter->setBrush(color);
    QRectF rectf(-radius, -radius, radius * 2, radius * 2);
    QPainterPath path;
    path.arcTo(rectf, startAngle, angleLength);
    painter->drawPath(path);
}

绘制完成后的效果图如下所示：

 

 二、绘制中间的圆形区域：

void CustomPieChart::drawMidRound(QPainter *painter)
{
    if(m_total == 0)
        return;
    QLinearGradient linear(QPointF(0, 0), QPointF(150, 150));
    linear.setColorAt(0, QColor("#c5c5c5"));
    linear.setColorAt(1, QColor("#ffffff"));
    painter->setBrush(linear);
    painter->drawEllipse(QPointF(0, 0), m_midR, m_midR);
}

绘制完成后的效果图如下所示：

 三、绘制中心圆形区域

void CustomPieChart::drawCenterRound(QPainter *painter)
{
    if(m_total==0)
        return;
    painter->setBrush(Qt::white);
    painter->drawEllipse(QPointF(0, 0), m_centerR, m_centerR);
}

绘制完成后的效果图如下所示：

 四、绘制中心文字

void CustomPieChart::drawText(QPainter *painter)
{
    if(m_total==0)
        return;
    QPen pen;
    pen.setColor(QColor("#26303c"));
    pen.setWidth(3);
    painter->setPen(pen);
    painter->setFont(QFont("Source Han Sans CN", m_fontSize));
    int value = qCeil((float)m_valueMap.value(m_curKey) / (float)m_total * 100.0);
    qreal w = QFontMetrics(painter->font()).width(QObject::tr("%1%").arg(value));
    painter->drawText(-(w/2), 10, QObject::tr("%1%").arg(value));

    painter->setFont(QFont("Source Han Sans CN", m_fontSize - 16));
    w = QFontMetrics(painter->font()).width(m_curKey);
    painter->drawText(-(w/2), 40, m_curKey);
}

绘制完成后的效果图如下所示：

         到目前为止，整个饼状图已经绘制完成，现在需要实现的就是鼠标悬浮每个区域后突出显示该部分，并且中心文字为该部分的占比以及名称。这样就需要重新实现QWidget的鼠标移动事件，当我们鼠标在移动的时候，指向某一块后，将该快的半径大于其他区域的半径即就可以实现突出显示的效果，mouseMoveEvent,默认下只接收鼠标按下后的移动事件，所以必须设置：

setMouseTracking(true);

重点：如何找到鼠标当前所在的区域：以圆心为坐标原点，将鼠标所在的坐标为pos(x, y)转换为原点坐标;鼠标到圆心的距离 L等于:

qSqrt(qPow(pos.x(), 2) + qPow(pos.y(), 2));

如果当前L>midR && L< R, 那么知道当前鼠标在彩色的块区域部分，在绘制扇形区域时候会记录当前区域的其实角度和结束角度，那么计算pos和原点的夹角（不同象限不同计算）；判断当前夹角在哪一块区域内，则突出显示该部分。

//起点到鼠标跨过的角度
float CustomPieChart::getPosInAngle(QPointF pos)
{
    qreal a = qAbs(pos.y());
    qreal c = qSqrt(qPow(pos.x(), 2) + qPow(pos.y(), 2));
    qreal radians = qAsin((float)a/(float)c);
    qreal rangle = 180.0 / M_PI * radians;
    if(pos.x()>0 && pos.y()>0)
        return rangle;
    if(pos.x()<0 && pos.y()>0)
        return 180.0 - rangle;
    if(pos.x()<0 && pos.y()<0)
        return 180.0 + rangle;
    if(pos.x()>0 && pos.y()<0)
        return 360.0 - rangle;
    else
        return 0.0;
}

主要代码头文件：

#ifndef CUSTOM_PIE_CHART_H
#define CUSTOM_PIE_CHART_H

#include <QWidget>
#include <QObject>
#include <QPainter>
#include <QPaintEvent>
#include <QMouseEvent>
#include <QEvent>

class CustomPieChart : public QWidget
{
    QOBJECT_H
public:
    explicit CustomPieChart(QWidget* parent = nullptr);
    explicit CustomPieChart(const QSize& size, QWidget* parent = nullptr);
    ~CustomPieChart();
    void setThisFixedSize(const QSize& size);
    QSize thisSize()const;

    void setData(const QMap<QString, int>& dataMap);
    QMap<QString, int> data()const;

    void setValueColor(const QMap<QString, QColor>& colorMap);
    QMap<QString, QColor> valuesColor()const;

protected:
    void paintEvent(QPaintEvent* e);
    void leaveEvent(QEvent *event);
    void mouseMoveEvent(QMouseEvent *event);
private:
    void drawValues(QPainter* painter);
    void drawMidRound(QPainter* painter);
    void drawCenterRound(QPainter* painter);
    void drawText(QPainter* painter);
    void gradientArc(QPainter *painter, QString key, qreal startAngle, qreal angleLength, QColor color);
    float getPosInAngle(QPointF pos);

    QMap<QString, QColor> m_colorMap;
    QMap<QString, int> m_valueMap;

    qreal m_radius;
    qreal m_total = 0;

    qreal m_midR;
    qreal m_centerR;

    QMap<QString, QPair<qreal, qreal>> m_anglePairMap;
    QMap<QString, bool> m_valueStateMap;
    QRect m_midRect, m_centerRect;
    qreal m_fontSize;
    QString m_curKey = QString();
};
#endif // CUSTOM_PIE_CHART_H

源文件：

#include "custom_pie_chart.h"
#include <QDebug>
#include <QFontMetrics>
#include <qmath.h>

#define  SUPERPLUS_H       10   //悬浮状态超出高度
#define  BLANK_W           1    //各个value 间间隔
#define  DEFAULT_FONT_SIZE 40   //默认字体大小

CustomPieChart::CustomPieChart(QWidget* parent)
    :QWidget(parent)
{
    setMouseTracking(true);
    m_radius = width()/2 - SUPERPLUS_H;  //大圆的半径
    m_midR = m_radius*2/3;               //中间圆的半径
    m_centerR = m_radius/2;              //中心圆的半径
    m_fontSize = DEFAULT_FONT_SIZE;      //字体默认大小
}

CustomPieChart::CustomPieChart(const QSize &size, QWidget *parent)
    :QWidget(parent)
{
    setMouseTracking(true);
    setFixedSize(size);
    m_radius = width()/2 - SUPERPLUS_H;
    m_midR = m_radius*2/3;
    m_centerR = m_radius/2;
    m_fontSize = DEFAULT_FONT_SIZE;
}

CustomPieChart::~CustomPieChart(){}


void CustomPieChart::setThisFixedSize(const QSize &size)
{
    setFixedSize(size);
    m_radius = width()/2 - 20;
    m_midR = m_radius*2/3;
    m_centerR = m_radius/2;
    update();
}
QSize CustomPieChart::thisSize()const
{
    return size();
}

void CustomPieChart::setData(const QMap<QString, int>& dataMap)
{
    m_valueStateMap.clear();
    m_colorMap.clear();
    m_anglePairMap.clear();
    m_valueMap = dataMap;
    auto iter = m_valueMap.begin();
    for(int index = 1;iter!=m_valueMap.end();iter++){
        m_total += iter.value();
        if(index % 2 !=0)
            m_colorMap.insert(iter.key(), QColor("#ee5b5b"));
        else
            m_colorMap.insert(iter.key(), QColor("#30c1d8"));
        if(index == 1)
            m_curKey = iter.key();
        bool state = (index == 1)?true:false;
        m_valueStateMap.insert(iter.key(), state);
        index++;
    }
    if(m_colorMap.size()>0 && m_valueMap.size()>0)
        update();
}

QMap<QString, int> CustomPieChart::data()const
{
    return m_valueMap;
}

void CustomPieChart::setValueColor(const QMap<QString, QColor> &colorMap)
{
    m_colorMap = colorMap;
    if(m_colorMap.size()>0 && m_valueMap.size()>0)
        update();
}

QMap<QString, QColor> CustomPieChart::valuesColor()const
{
    return m_colorMap;
}

void CustomPieChart::paintEvent(QPaintEvent *)
{
    QPainter painter(this);
    painter.setRenderHint(QPainter::Antialiasing, true);
    painter.translate(width() >> 1, height() >> 1);
    painter.setPen(Qt::NoPen);
    drawValues(&painter);      //绘制每一个扇形值区域
    drawMidRound(&painter);    //绘制中部圆
    drawCenterRound(&painter); //绘制中心圆
    drawText(&painter);        //绘制占比
}

void CustomPieChart::drawValues(QPainter *painter)
{
    auto iter = m_valueMap.begin();
    QString key = "";
    qreal value = 0.0;
    qreal startAngle = 0.0;
    qreal angleLength = 0.0;
    for(;iter!=m_valueMap.end();iter++){
        key = iter.key();
        value = iter.value();
        angleLength = (value / m_total) * 360 - BLANK_W;
        gradientArc(painter, key, startAngle, angleLength, m_colorMap[key]);
        m_anglePairMap.insert(key, QPair<qreal, qreal>(startAngle, angleLength));
        startAngle += (angleLength + BLANK_W);
    }
}

void CustomPieChart::drawMidRound(QPainter *painter)
{
    if(m_total == 0)
        return;
    QLinearGradient linear(QPointF(0, 0), QPointF(150, 150));
    linear.setColorAt(0, QColor("#c5c5c5"));
    linear.setColorAt(1, QColor("#ffffff"));
    painter->setBrush(linear);
    painter->drawEllipse(QPointF(0, 0), m_midR, m_midR);
}

void CustomPieChart::drawCenterRound(QPainter *painter)
{
    if(m_total==0)
        return;
    painter->setBrush(Qt::white);
    painter->drawEllipse(QPointF(0, 0), m_centerR, m_centerR);
}

void CustomPieChart::drawText(QPainter *painter)
{
    if(m_total==0)
        return;
    QPen pen;
    pen.setColor(QColor("#26303c"));
    pen.setWidth(3);
    painter->setPen(pen);
    painter->setFont(QFont("Source Han Sans CN", m_fontSize));
    int value = qCeil((float)m_valueMap.value(m_curKey) / (float)m_total * 100.0);
    qreal w = QFontMetrics(painter->font()).width(QObject::tr("%1%").arg(value));
    painter->drawText(-(w/2), 10, QObject::tr("%1%").arg(value));

    painter->setFont(QFont("Source Han Sans CN", m_fontSize - 16));
    w = QFontMetrics(painter->font()).width(m_curKey);
    painter->drawText(-(w/2), 40, m_curKey);
}

void CustomPieChart::gradientArc(QPainter *painter, QString key, qreal startAngle, qreal angleLength, QColor color)
{
    qreal radius = m_valueStateMap.value(key)?m_radius+SUPERPLUS_H:m_radius;
    painter->setBrush(color);
    QRectF rectf(-radius, -radius, radius * 2, radius * 2);
    QPainterPath path;
    path.arcTo(rectf, startAngle, angleLength);
    painter->drawPath(path);
}

void CustomPieChart::leaveEvent(QEvent *event)
{
    return QWidget::leaveEvent(event);
}

void CustomPieChart::mouseMoveEvent(QMouseEvent *event)
{
    QPointF pos = event->pos();
    pos = QPointF(pos.x() - m_radius, m_radius - pos.y());
    qreal l = qSqrt(qPow(pos.x(), 2)+qPow(pos.y(), 2));
    //内圆
    if(l < m_radius/2){
        m_centerR = m_radius/2 + SUPERPLUS_H;
        m_fontSize = DEFAULT_FONT_SIZE + 2;
        update();
        return QWidget::mouseMoveEvent(event);
    }
    //外圈圆
    if(l > m_radius*2/3 && l<m_radius){
        m_centerR = m_radius/2;
        m_fontSize = DEFAULT_FONT_SIZE;
        qreal rangle = getPosInAngle(pos);
        auto iter = m_anglePairMap.begin();
        for(;iter!=m_anglePairMap.end();iter++){
            QPair<qreal, qreal> value = iter.value();
            if(rangle>=value.first && rangle<=(value.first + value.second)){
                m_valueStateMap[iter.key()] = true;
                m_curKey = iter.key();
            }
            else
                m_valueStateMap[iter.key()] = false;
        }
        update();
        return QWidget::mouseMoveEvent(event);
    }
    return QWidget::mouseMoveEvent(event);
}

float CustomPieChart::getPosInAngle(QPointF pos)
{
    qreal a = qAbs(pos.y());
    qreal c = qSqrt(qPow(pos.x(), 2) + qPow(pos.y(), 2));
    qreal radians = qAsin((float)a/(float)c);
    qreal rangle = 180.0 / M_PI * radians;
    if(pos.x()>0 && pos.y()>0)
        return rangle;
    if(pos.x()<0 && pos.y()>0)
        return 180.0 - rangle;
    if(pos.x()<0 && pos.y()<0)
        return 180.0 + rangle;
    if(pos.x()>0 && pos.y()<0)
        return 360.0 - rangle;
    else
        return 0.0;
}

测试代码：

    ui->setupUi(this);
    setMouseTracking(true);
    m_pieChartView = new CustomPieChart(QSize(400, 400), this);
    QGridLayout* glayout = new QGridLayout(this);
    glayout->addWidget(m_pieChartView);

    QMap<QString, int> dataMap;
    dataMap.insert("a", 24);
    dataMap.insert("b", 40);
    dataMap.insert("c", 70);
    dataMap.insert("d", 30);
    dataMap.insert("e", 50);
    dataMap.insert("f", 90);
    dataMap.insert("g", 35);
    dataMap.insert("h", 35);

    QMap<QString, QColor> colorMap;
    colorMap.insert("a", QColor("#4EEE94"));
    colorMap.insert("b", QColor("#6495ED"));
    colorMap.insert("c", QColor("#8470FF"));
    colorMap.insert("d", QColor("#FFD700"));
    colorMap.insert("e", QColor("#EE6363"));
    colorMap.insert("f", QColor("#FF1493"));
    colorMap.insert("g", QColor("#EE2C2C"));
    colorMap.insert("h", QColor("#A020F0"));

    m_pieChartView->setData(dataMap);
    m_pieChartView->setValueColor(colorMap);

科科哥
关注
专栏目录
Qt/C++编写自定义控件20-自定义饼图
Qt/C++视频监控/推流/物联网/大屏系统/自定义控件/UI定制/输入法
06-03 5091
前言 上次在写可视化数据大屏电子看板项目的时候，为了逐步移除对QChart的依赖（主要是因为QChart真的太垃圾了，是所有Qt的模块中源码最烂的一个，看过源码的人没有一个不吐槽，不仅不支持10W级别的数据量曲线展示，居然一个饼图控件，文字部分的展示还用QLabel来显示的，这么低效率的方式都有），起初曲线图和柱状图等都用QCustomPlot替代了，就剩一个饼图需要自己用无敌的QPainter来...
Qt实现自定义饼状统计图（附完整源码）
希望我的博客，能帮上你解决学习中工作中所遇到的问题
07-23 91
Qt实现自定义饼状统计图（附完整源码）
Qt之自绘制饼图
11-05
自绘制qt饼图，自适应大小、可以设置为空心饼图，支持label显示，并带有箭头指示
Qt学习之QtCharts绘图（饼图、曲线图、柱状图）
最新发布
qq_52877096的博客
08-24 424
QtCharts是 Qt 框架的一个模块，用于创建和处理数据可视化图表。它提供了多种类型的图表和可视化工具，允许开发者在基于 Qt 的应用程序中轻松地展示数据。在ui界面上添加QChartView 命名为：chartView_delay。在ui界面上添加QChartView 命名为：chartView_UE。在ui界面上添加QChartView 命名为：pie_1。头文件 #include <QtCharts>.pro文件中添加：QT += charts。
Qt自定义控件--饼图3
Qt自定义控件及应用开发
10-01 409
Qt自定义控件--饼图 圆弧形状 Qt绘制饼图控件 样式可定制 国庆期间更新饼图控件，样式来源于echarts 如有其它样式欢迎提供 有需要，留言。
Qt自绘制饼图demo
06-19
最近在搞绘图方面的工作，说实话C++的第三方绘图库并不算多，有：qtcharts、ChartDirector、qwt、kdchart和QCustomPlot。这几个库各有利弊。在网上找了个实例，上传给大家共享。
QT自定义控件-饼状图（含源码和demo）
08-24
继承QWIDGET实现的自定义饼图，效果跟echarts中的差不多
04高级自绘-03自定义饼状图-custompie
Qt/C++视频监控/推流/物联网/大屏系统/自定义控件/UI定制/输入法
10-13 456
一、运行效果 二、功能特点 可设置文字颜色。 可设置边框颜色。 可设置颜色集合。 可设置某个区域是否弹出。 可设置是否显示百分比。 支持字符串形式设置数据。 三、公共接口 public Q_SLOTS: //设置是否全部展开+展开的索引 void setExplodedAll(bool explodedAll); void setExplodedIndex(int index); //设置是否启用默认颜色 void setDefaultColor(bool d
Qt实现绘制饼图（附完整源码）
希望我的博客，能帮上你解决学习中工作中所遇到的问题
07-26 146
Qt实现绘制饼图（附完整源码）
qt饼状图代码.zip
04-11
在压缩包的文件名"piechart"中，我们可以推测这是包含饼状图实现的源代码文件，可能是一个C++源文件（如".cpp"扩展名）或者头文件（".h"扩展名）。这个文件可能包含了类定义、成员函数以及用于绘制和处理数据的逻辑...
QT自定义控件-饼状图（环形饼状图）（含代码和demo）
08-25
基于QWIDGET实现的自定义控件，环形饼状图，含代码和demo
qt 三维饼状图
01-07
网上搜集的qt三维饼状图、柱状图绘制源代码，带有动画效果
Qt QChart 绘制饼状图、曲线、条形图，并保存曲线图形
06-13
QChart 绘制饼状图、曲线、条形图，并保存曲线图形
Qt图表绘制（QtCharts）-绘制简单的饼图（8）
mahuifa的博客
05-02 2826
Qt使用QtCharts模块绘制饼图的Demo，与实现圆环图差不多，实现步骤、代码注释详细，便于初学者学习。
【QT】绘制饼状图 QPieSeries
sazass的博客
01-20 6323
相关链接： QT绘制直方图BarChart QT绘制折线图LineChart QT绘制曲线图SplineChart QT绘制散点图ScatterChart QT绘制散点图AreaChart 0.创建ui窗口： 主要就是拖拉一个Horizontal Layout 1.创建Qchart对象： QChart *chart = new QChart(); chart->setTitle("饼状图演示图"); //设置表格标题 2.创建QPieSeries对象： QPieSeries *series =
QT图表chart-饼状图
博咯的博客
11-16 6468
QT图表-饼状图前言一、使用步骤首先在项目文件中加入：其次在头文件添加：widget控件二、程序总结 前言 图表功能是QT做数据可视化屏幕的基础，这里我用的是QT再带的chart类来实现图表。 饼状图实现效果如下： 详细见官网https://doc.qt.io/qt-5.15/qtcharts-index.html 一、使用步骤 首先在项目文件中加入： QT += charts 其次在头文件添加： #include <QtCharts> using namespace QtCha
Qt自定义控件--饼图1
Qt自定义控件及应用开发
09-30 800
Qt自定义控件--饼图 Qt绘制饼图控件 样式可定制 国庆期间更新饼图控件，样式来源于echarts 如有其它样式欢迎提供 如需要源码，留言。
Qt编写自定义控件20-自定义饼图
06-04 258
一、前言 上次在写可视化数据大屏电子看板项目的时候，为了逐步移除对QChart的依赖（主要是因为QChart真的太垃圾了，是所有Qt的模块中源码最烂的一个，看过源码的人没有一个不吐槽，不仅不支持10W级别的数据量曲线展示，居然一个饼图控件，文字部分的展示还用QLabel来显示的，这么低效率的方式都有），起初曲线图和柱状图等都用QCustomPlot替代了，就剩一个饼图需要自己用无敌的QPaint...
qtcharts绘制折线图
09-17
QtCharts是Qt中的一个模块，用于绘制各种图表，包括折线图。要绘制折线图，首先需要在Qt项目中加入QtCharts模块的依赖。在.pro文件中添加这行代码：`QT += charts`。 然后，在需要绘制折线图的地方，包括的头文件`#include <QtCharts>`，以及命名空间`using namespace QtCharts`。接着，创建一个`QChart`对象，用于绘制整个图表。 接下来，创建一个`QLineSeries`对象，并添加数据到该对象中。`QLineSeries`用于存储折线图中的数据点。可以使用`append`函数逐个添加数据点。 然后，将`QLineSeries`对象添加到`QChart`对象中，调用`addSeries`函数。 接着，创建一个`QChartView`对象，将`QChart`对象设置为其图表，并将其显示出来。 最后，可根据需要设置图表的样式，包括坐标轴标签、标题、背景色等。可以使用`setTitle`和`createDefaultAxes`函数来设置标题和坐标轴。 绘制折线图的过程中，也可以对折线进行样式设置，如设置线条颜色、宽度、样式等。可以使用`setPen`函数来设置线条的属性。 总结来说，通过使用QtCharts模块中的`QChart`、`QLineSeries`、`QChartView`等类，可以方便地绘制折线图。需要注意的是，为了使用这些类，需要在项目中添加QtCharts模块的依赖，并进行必要的头文件包含。绘制折线图的过程中，可以设置图表的样式和折线的属性，以满足具体的需求。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值