Qt图表绘制（QtCharts）-绘制简单的圆环图（7） 原创

Qt图表绘制（QtCharts）-绘制简单的圆环图（7）🍇

文章目录

• Qt图表绘制（QtCharts）-绘制简单的圆环图（7）🍇
• • 1、概述🍈
  • 2、实现步骤🍉
  • 3、主要使用的类
  • 4、主要代码🍋
  • 5、实现效果🙉
  • 6、源代码🥝

更多精彩内容

👉个人内容分类汇总 👈

注意：我使用的QtCharts是基于Qt 5.12.12版本

1、概述🍈

Qt Charts 模块提供了一组易于使用的图表组件，能够创建时尚、交互式、以数据为中心的用户界面。

它使用 Qt Graphics View 框架，因此可以轻松地将图表集成到现代用户界面中。

Qt Charts 可以用作 QWidgets、QGraphicsWidget 或 QML 类型。 用户可以通过选择图表主题之一轻松创建令人印象深刻的图表。

这一个Demo干了啥：🤏🤏🤏

• 在initChart()函数中演示了如何使用QtCharts绘制简单的圆环图；
• 在源码中包含使用的详细注释和注意事项 ；
• 将UI和代码分离，使实现图表绘制的代码更单一简洁，便于学习。

2、实现步骤🍉

1. 打开.pro文件，输入Qt += charts，引入Qt Charts模块；

   

2. 打开ui设计器，选择一个Graphics View控件，鼠标右键提升为；

   

   

3. 输入QChartView，点击添加、提升；

   

4. 在窗口右上角就可以看见控件类型变成QChartView了，然后将控件命名为chartView； 注意：由于QChartView需要引入命名空间，所以这里提升后编译时不通过的。

   

5. 在代码中添加QtCharts头文件，引入命名空间；一般我们最好在cpp文件中添加头文件和引入命名空间，尽量避免在.h文件中引入（这里为了方便，代码简洁直接在头文件中引入命名空间），而在cpp文件中引入命名空间需要在ui_widget.h文件前，否则编译会失败，因为在ui文件中会用到QChartView类。

   #include <QtCharts>         // 导入QtCharts所有的头文件，也可以单独导入某一个
   
   // 引入qchart命名空间（注意：如果是在ui中提升为QChartView，
   // 则QT_CHARTS_USE_NAMESPACE一定要放在#include "ui_widget.h"前面，否则编译会失败）
   QT_CHARTS_USE_NAMESPACE
   

3、主要使用的类

类名	作用
QPieSeries	用于创建一个圆环图（饼图）
QPieSlice	组成圆环（饼图）的其中一个切片

4、主要代码🍋

• 在widget.cpp的构造函数中调用initChart()函数；
• 注意：不设置孔径就是饼图

/**
 * @brief 初始化绘制圆环图，设置了图表样式，并且将一个圆环切片分离，显示当前切片的标签
 */
void Widget::initChart()
{
    QPieSeries* series = new QPieSeries();                              // 创建一个圆环图对象
    series->setHoleSize(0.45);                                          // 设置圆环孔径大小0.0 ~1.0
    series->append("蛋白质占比 9.2%", 9.2);                              // 将具有指定值和标签的单个切片附加到series
    series->append("其它 23.8%", 23.8);
    series->append("碳水化合物 51.4%", 51.4);
    QPieSlice* slice = series->append("脂肪占比 15.6%", 15.6);           // 设置一个圆环切片，并返回这个切片对象
    slice->setExploded();                                               // 将当前切片分离
    slice->setLabelVisible();                                           // 显示当前切片的标签，默认是不显示的

    ui->chartView->setRenderHint(QPainter::Antialiasing);               // 设置抗锯齿
    ui->chartView->chart()->setTitle("圆环图标题");                       // 设置图表标题
    ui->chartView->chart()->addSeries(series);                          // 将创建的圆环对象添加进chart中
    ui->chartView->chart()->setTheme(QChart::ChartThemeBlueCerulean);   // 设置图表的样式
    ui->chartView->chart()->legend()->setAlignment(Qt::AlignBottom);    // 指定图例显示在图表底部
    ui->chartView->chart()->legend()->setFont(QFont("Arial", 12));       // 设置图例的字体
}

5、实现效果🙉

6、源代码🥝

gitee
github

😮‍💨😮‍💨😮‍💨😮‍💨😮‍💨😮‍💨😮‍💨😮‍💨