QChart implements the drawing of pie charts and donut charts at specified positions on the ui interface

---

foreword

The recent development has encountered the need to draw pie charts. It is very convenient for the author to use the QCustomPlot graphics library to develop some graphics components in the early stage, but this library does not realize the drawing of pie charts, so QChart is used to realize the development of pie charts later. . This article mainly describes the use of the Charts module under Qt to draw pie charts, and combined with the examples in Qt Creator, a simple example is written here to realize the drawing of pie charts and donut charts, and the relevant codes are displayed Come out so that everyone can learn. If there are mistakes, everyone is welcome to criticize and correct.

Project effect

---

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

1. Example under Qt

Qt provides a series of examples for Qt Charts. We can directly open the examples in Qt Creator and search for the keyword "chart" to see these examples of Qt, including not only pie charts, but also various common graphic component development :

2. Implementation steps

First add the Charts module to the project pro file:

QT       += charts

Header files and namespaces:

#include <QtCharts>

QT_CHARTS_USE_NAMESPACE

The drawing of pie charts in Qt mainly uses four classes: QPieSeries + QPieSlice + QChart + QChartView.
1. QPieSeries class, creating pie chart data;
2. QPieSlice class, representing each part of the pie chart;
3. QChart class, creating charts
4. QChartView class, displaying charts

Draw a pie chart
The first method: instantiate the QChartView object, and then add the object to the widget
The second method: upgrade the widget control to QChartView, and then use setChart to add the chart,
so add the widget control on the ui interface to realize the specified widget position draw these graphs.

Drawing a donut chart
is equivalent to adding a round hole in the middle of the pie chart. Similar to the pie chart code, after instantiating the QPieSeries object, use the setHoleSize(num) function (0<=num<=1) to set the hole size Size.

For details, see the complete code in the following text

3. Example complete code display

1.customslice.h
This class is inherited from QPieSlice, which realizes highlighting when the mouse passes over the pie chart

#ifndef CUSTOMSLICE_H
#define CUSTOMSLICE_H

#include <QtCharts/QPieSlice>

QT_CHARTS_USE_NAMESPACE

class CustomSlice : public QPieSlice
{
    
    
    Q_OBJECT

public:
    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_NAMESPACE

CustomSlice::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_NAMESPACE

QT_BEGIN_NAMESPACE
namespace Ui {
    
     class Widget; }
QT_END_NAMESPACE

class Widget : public QWidget
{
    
    
    Q_OBJECT

public:
    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. The code below widget.cpp can be uncommented to view related effects

#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<=1
    m_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
has been set up here so that the content of the interface will stretch along with the size of the interface

Summarize

The Qt Charts module provides a series of easy-to-use chart components. When you need to use the charts component, you need to import this module, so don't forget to add "QT += charts" in the pro file. Here we simply use this module to draw pie charts. To learn the charts module, you can also use related examples in Qt Creator. When installing Qt Creator, you need to check this module, otherwise it cannot be used!

The complete code of this example Baidu network disk link: https://pan.baidu.com/s/1RAxh-VMrC12FzvxwNsTRwQ
Extraction code: xxcj

---

hello:
Learn together and make progress together. If you still have related questions, you can leave a message in the comment area for discussion.

Reference article: Qt's pie chart
QChart's QPieSeries draws a pie chart