前言

近期开发遇上了绘制饼图的需求，笔者前期使用QCustomPlot图形库进行一些图形组件的开发是非常方便的，但是这个库没有实现饼图的绘制，所以后面是使用QChart来实现饼状图的开发。本文主要讲述了使用Qt下的Charts 模块来进行饼图的绘制，并结合Qt Creator里面的示例，在这里编写了一个简单的示例实现了饼状图及圆环图的绘制，并将相关代码展现出来以便大家学习，如有错误之处，欢迎大家批评指正。

项目效果

提示：以下是本篇文章正文内容，下面案例可供参考

一、Qt下的示例

Qt 为 Qt Charts 提供了一系列示例，我们直接打开Qt Creator里面的示例并搜索关键字“chart”即可看到Qt的这些例子，其中不仅仅是饼图，还有各种常见的图形组件开发：

二、实现步骤

首先在项目pro文件中添加Charts模块：

QT       += charts

头文件和命名空间：

#include <QtCharts>QT_CHARTS_USE_NAMESPACE

Qt 中实现饼图的绘制，主要使用了 QPieSeries + QPieSlice + QChart + QChartView 这四个类。
1.QPieSeries类，创建饼图数据；
2.QPieSlice类，代表组成饼图的每一份；
3.QChart类，创建图表
4.QChartView类，显示图表

绘制饼图
第一种方法：实例化QChartView对象，再将该对象添加到widget里
第二种方法：提升widget控件为QChartView，再使用setChart添加图表
所以在ui界面上添加widget控件，实现指定widget位置处绘制这些图形。

绘制圆环图
相当于在饼图中间添加了一个圆孔，与饼图代码类似，在实例化QPieSeries对象后，使用setHoleSize(num)函数（0<=num<=1），来设置圆孔的尺寸大小。

详情可见后文中的完整代码

三、示例完整代码展示

1.customslice.h
该类继承于QPieSlice，实现鼠标经过该份饼图时高亮

#ifndef CUSTOMSLICE_H
#define CUSTOMSLICE_H#include <QtCharts/QPieSlice>QT_CHARTS_USE_NAMESPACEclass CustomSlice : public QPieSlice
{Q_OBJECTpublic:CustomSlice(QString label, qreal value);public:QBrush originalBrush();public Q_SLOTS:void showHighlight(bool show);private:QBrush m_originalBrush;
};#endif // CUSTOMSLICE_H

2.customslice.cpp

#include "customslice.h"QT_CHARTS_USE_NAMESPACECustomSlice::CustomSlice(QString label, qreal value): QPieSlice(label, value)
{connect(this, &CustomSlice::hovered, this, &CustomSlice::showHighlight);
}QBrush CustomSlice::originalBrush()
{return m_originalBrush;
}void CustomSlice::showHighlight(bool show)
{if(show){QBrush brush = this->brush();m_originalBrush = brush;brush.setColor(brush.color().lighter());setBrush(brush);}else{setBrush(m_originalBrush);}
}

3.widget.h

#ifndef WIDGET_H
#define WIDGET_H#include <QWidget>
#include <QtCharts>
#include "customslice.h"QT_CHARTS_USE_NAMESPACEQT_BEGIN_NAMESPACE
namespace Ui { class Widget; }
QT_END_NAMESPACEclass Widget : public QWidget
{Q_OBJECTpublic:Widget(QWidget *parent = nullptr);~Widget();void initChart();private:Ui::Widget *ui;QChartView *m_breadView;QPieSeries *m_breadSeries;QChartView *m_myView;QPieSeries *m_mySeries;QChartView *m_ringView;QPieSeries *m_ringSeries;
};
#endif // WIDGET_H

4.widget.cpp
下面的代码可以取消注释，查看相关效果

#include "widget.h"
#include "ui_widget.h"Widget::Widget(QWidget *parent): QWidget(parent), ui(new Ui::Widget)
{ui->setupUi(this);this->setWindowTitle("饼图测试");this->showMaximized();   //设置窗口最大化initChart();
}Widget::~Widget()
{delete ui;
}void Widget::initChart()
{//绘制饼图的两种方法//一、实例化QChartView对象，再将该对象添加到widget里//二、提升widget控件为QChartView//下面的代码可以取消注释，查看相关效果//第一种方法//1.QPieSeries类，创建饼图数据m_breadSeries = new QPieSeries();//添加数据常规方法//m_breadSeries->append("red",1);//m_breadSeries->append("green",2);//m_breadSeries->append("blue",7);//创建CustomSlice对象，实现鼠标经过该份饼图时高亮*m_breadSeries << new CustomSlice("red",1);*m_breadSeries << new CustomSlice("green",2);*m_breadSeries << new CustomSlice("blue",7);m_breadSeries->setLabelsVisible();   //设置标签可见//2.QPieSlice类，代表每一份饼图QPieSlice *breadRed = m_breadSeries->slices().at(0);QPieSlice *breadGreen = m_breadSeries->slices().at(1);QPieSlice *breadBlue = m_breadSeries->slices().at(2);breadRed->setColor(QColor(255,0,0,255));breadGreen->setColor(QColor(0,255,0,255));breadBlue->setColor(QColor(0,0,255,255));//3.QChart类，创建图表QChart *breadChart = new QChart;breadChart->addSeries(m_breadSeries);breadChart->setTitle("BreadChart");//breadChart->legend()->hide();                             //隐藏图例//breadChart->setTheme(QChart::ChartThemeBrownSand);        //设置主题，会影响饼图颜色//breadChart->setAnimationOptions(QChart::AllAnimations);   //动画效果//4.QChartView类，显示图表m_breadView = new QChartView(breadChart);m_breadView->setRenderHint(QPainter::Antialiasing);   //设置渲染属性QGridLayout *myLayout = new QGridLayout();myLayout->addWidget(m_breadView);ui->widget_bread->setLayout(myLayout);//第二种方法m_mySeries = new QPieSeries();m_mySeries->append("red",1);m_mySeries->append("green",2);m_mySeries->append("blue",7);QPieSlice *myRed = m_mySeries->slices().at(0);QPieSlice *myGreen = m_mySeries->slices().at(1);QPieSlice *myBlue = m_mySeries->slices().at(2);myRed->setColor(QColor(255,0,0,255));myGreen->setColor(QColor(0,255,0,255));myBlue->setColor(QColor(0,0,255,255));QChart *myChart = new QChart;myChart->addSeries(m_mySeries);myChart->setTitle("MyChart");//myChart->legend()->hide();                      //隐藏图例//myChart->setTheme(QChart::ChartThemeBlueNcs);   //设置主题myChart->setAnimationOptions(QChart::AllAnimations);   //动画效果ui->view_bread->setChart(myChart);ui->view_bread->setRenderHint(QPainter::Antialiasing);//绘制圆环图//1.相当于在饼图中间添加了一个圆孔，与饼图代码类似//2.setHoleSize(num)，设置圆孔尺寸,0<=num<=1m_ringSeries = new QPieSeries();m_ringSeries->setHoleSize(0.35);   //设置圆孔的尺寸大小m_ringSeries->append("red",1);m_ringSeries->append("green",2);m_ringSeries->append("blue",7);QPieSlice *ringRed = m_ringSeries->slices().at(0);QPieSlice *ringGreen = m_ringSeries->slices().at(1);QPieSlice *ringBlue = m_ringSeries->slices().at(2);ringRed->setColor(QColor(255,0,0,255));ringGreen->setColor(QColor(0,255,0,255));ringBlue->setColor(QColor(0,0,255,255));QChart *ringChart = new QChart;ringChart->addSeries(m_ringSeries);ringChart->setTitle("Ring Charts");                      //设置标题//ringChart->setTheme(QChart::ChartThemeBlueCerulean);   //设置主题//ringChart->legend()->setFont(QFont("Arial", 7));       //设置图例字体m_ringView = new QChartView(ringChart);m_ringView->setRenderHint(QPainter::Antialiasing);       //设置渲染属性QGridLayout *ringLayout = new QGridLayout();ringLayout->addWidget(m_ringView);ui->widget_ring->setLayout(ringLayout);
}

5.widget.ui
这里进行了布局设置，这样界面内容会跟随界面大小拉伸

总结

Qt Charts模块提供了一系列容易使用的图表组件，需要使用charts组件时，需要导入这个模块，所以在pro文件中一定不要忘记添加“QT += charts”。这里只是简单的使用该模块来实现饼状图的绘制，要学习charts模块还可以通过Qt Creator里面相关的示例。在安装Qt Creator的时候，需要勾选上这个模块，不然是不能使用的！

本示例完整代码百度网盘链接：https://pan.baidu.com/s/1RAxh-VMrC12FzvxwNsTRwQ
提取码：xxcj

hello：
共同学习，共同进步，如果还有相关问题，可在评论区留言进行讨论。

参考文章：Qt之饼图
QChart之QPieSeries绘制饼状图

QChart实现ui界面上指定位置饼状图、圆环图的绘制相关推荐

qt ui界面无法移动控件_使用qt 键盘上的方向键只能控制ui界面上的按钮选择，不能实现我设定的功能...
已结贴√ 问题点数:20 回复次数:2 使用qt 键盘上的方向键只能控制ui界面上的按钮选择,不能实现我设定的功能我做的是一个贪吃蛇游戏,现在我想实现的功能是:按下键盘上的上下左右箭头的方向按键时, ...
Android跳转动画时长,Android_Activit跳转动画之界面上某个位置并裂开上下拉伸动画跳转，需求:Activity(fragment)跳转的时候 - phpStudy...
Activit跳转动画之界面上某个位置并裂开上下拉伸动画跳转需求:Activity(fragment)跳转的时候当前界面裂开,上下各自拉出手机屏幕,之后跳转到相对应的Activity.整体效果图如下 ...
Python的可视化包 – Matplotlib 2D图表(点图和线图,.柱状或饼状类型的图),3D图表(曲面图，散点图和柱状图)...
Python的可视化包 – Matplotlib Matplotlib是Python中最常用的可视化工具之一, 可以非常方便地创建海量类型地2D图表和一些基本的3D图表.Matplotlib最早是为了 ...
Unity之在UI界面上显示3D模型
1.创建一个3D摄像机,渲染3D模型.(我为了方便就把模型放到了Camera的下面,你可以不这样) 2.在2D里面指定一个TopLeft和BottomRight,用来表示模型渲染到UI上面的区域. 3 ...
unity在UI界面上展示旋转模型
1.创建一个Raw Image用来在UI界面进行显示模型 2.将图片在界面调整到合适位置,根据自己的需要进行调整 3.在Assets文件夹下创建"渲染器纹理" 后面如果觉得显示不够 ...
python调用百度AI自动识别并提取图片上指定位置的文字信息
这是一个三个月前的项目需求,需要识别多张图片上固定位置的信息并提取.说到python 上文字识别,可能有些人想用 pytesseract 来做,怎么说呢,识别精准度相对较低,而且对于数量较大的图片来说 ...
android 界面散开动画,Activit跳转动画之界面上某个位置并裂开上下拉伸动画跳转...
需求:Activity(fragment)跳转的时候当前界面裂开,上下各自拉出手机屏幕,之后跳转到相对应的Activity.整体效果图如下思路:1,在当前Activity中截取当前手机的屏幕获取到b ...
Activit跳转动画之界面上某个位置裂开上下拉伸动画跳转
需求:Activity(fragment)跳转的时候当前界面裂开,上下各自拉出手机屏幕,之后跳转到相对应的Activity.整体效果图如下思路:1,在当前Activity中截取当前手机的屏幕获取到b ...
matlab将某点标红,Draw-a-rectangle-matlab 本程序在图像上指定位置话红色的矩形框作为标记 - 下载 - 搜珍网...
在图像上画矩形框matlab程序/ 在图像上画矩形框matlab程序/_input/ 在图像上画矩形框matlab程序/_input/01.jpg 在图像上画矩形框matlab程序/_input/02 ...

QChart实现ui界面上指定位置饼状图、圆环图的绘制

文章目录

前言

一、Qt下的示例

二、实现步骤

三、示例完整代码展示

总结

QChart实现ui界面上指定位置饼状图、圆环图的绘制相关推荐

最新文章

热门文章