前言
近期開發(fā)遇上了繪制餅圖的需求，筆者前期使用QCustomPlot圖形庫進行一些圖形組件的開發(fā)是非常方便的，但是這個庫沒有實現(xiàn)餅圖的繪制，所以后面是使用QChart來實現(xiàn)餅狀圖的開發(fā)。本文主要講述了使用Qt下的Charts 模塊來進行餅圖的繪制，并結(jié)合Qt Creator里面的示例，在這里編寫了一個簡單的示例實現(xiàn)了餅狀圖及圓環(huán)圖的繪制，并將相關(guān)代碼展現(xiàn)出來以便大家學(xué)習(xí)，如有錯誤之處，歡迎大家批評指正。
項目效果
提示：以下是本篇文章正文內(nèi)容，下面案例可供參考
一、Qt下的示例
Qt 為 Qt Charts 提供了一系列示例，我們直接打開Qt Creator里面的示例并搜索關(guān)鍵字“chart”即可看到Qt的這些例子，其中不僅僅是餅圖，還有各種常見的圖形組件開發(fā)：
二、實現(xiàn)步驟
首先在項目pro文件中添加Charts模塊：
QT += charts
頭文件和命名空間：
#include <QtCharts>
QT_CHARTS_USE_NAMESPACE
Qt 中實現(xiàn)餅圖的繪制，主要使用了 QPieSeries + QPieSlice + QChart + QChartView 這四個類。
1.QPieSeries類，創(chuàng)建餅圖數(shù)據(jù)；
2.QPieSlice類，代表組成餅圖的每一份；
3.QChart類，創(chuàng)建圖表
4.QChartView類，顯示圖表
繪制餅圖
第一種方法：實例化QChartView對象，再將該對象添加到widget里
第二種方法：提升widget控件為QChartView，再使用setChart添加圖表
所以在ui界面上添加widget控件，實現(xiàn)指定widget位置處繪制這些圖形。
繪制圓環(huán)圖
相當(dāng)于在餅圖中間添加了一個圓孔，與餅圖代碼類似，在實例化QPieSeries對象后，使用setHoleSize(num)函數(shù)（0<=num<=1），來設(shè)置圓孔的尺寸大小。
詳情可見后文中的完整代碼
三、示例完整代碼展示
1.customslice.h
該類繼承于QPieSlice，實現(xiàn)鼠標經(jīng)過該份餅圖時高亮
#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.widget.cpp
下面的代碼可以取消注釋，查看相關(guān)效果
#include "widget.h"
#include "ui_widget.h"
Widget::Widget(QWidget *parent)
: QWidget(parent)
, ui(new Ui::Widget)
{
ui->setupUi(this);
this->setWindowTitle("餅圖測試");
this->showMaximized(); //設(shè)置窗口最大化
initChart();
}
Widget::~Widget()
{
delete ui;
}
void Widget::initChart()
{
//繪制餅圖的兩種方法
//一、實例化QChartView對象，再將該對象添加到widget里
//二、提升widget控件為QChartView
//下面的代碼可以取消注釋，查看相關(guān)效果
//第一種方法
//1.QPieSeries類，創(chuàng)建餅圖數(shù)據(jù)
m_breadSeries = new QPieSeries();
//添加數(shù)據(jù)常規(guī)方法
//m_breadSeries->append("red",1);
//m_breadSeries->append("green",2);
//m_breadSeries->append("blue",7);
//創(chuàng)建CustomSlice對象，實現(xiàn)鼠標經(jīng)過該份餅圖時高亮
*m_breadSeries << new CustomSlice("red",1);
*m_breadSeries << new CustomSlice("green",2);
*m_breadSeries << new CustomSlice("blue",7);
m_breadSeries->setLabelsVisible(); //設(shè)置標簽可見
//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類，創(chuàng)建圖表
QChart *breadChart = new QChart;
breadChart->addSeries(m_breadSeries);
breadChart->setTitle("BreadChart");
//breadChart->legend()->hide(); //隱藏圖例
//breadChart->setTheme(QChart::ChartThemeBrownSand); //設(shè)置主題，會影響餅圖顏色
//breadChart->setAnimationOptions(QChart::AllAnimations); //動畫效果
//4.QChartView類，顯示圖表
m_breadView = new QChartView(breadChart);
m_breadView->setRenderHint(QPainter::Antialiasing); //設(shè)置渲染屬性
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); //設(shè)置主題
myChart->setAnimationOptions(QChart::AllAnimations); //動畫效果
ui->view_bread->setChart(myChart);
ui->view_bread->setRenderHint(QPainter::Antialiasing);
//繪制圓環(huán)圖
//1.相當(dāng)于在餅圖中間添加了一個圓孔，與餅圖代碼類似
//2.setHoleSize(num)，設(shè)置圓孔尺寸,0<=num<=1
m_ringSeries = new QPieSeries();
m_ringSeries->setHoleSize(0.35); //設(shè)置圓孔的尺寸大小
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"); //設(shè)置標題
//ringChart->setTheme(QChart::ChartThemeBlueCerulean); //設(shè)置主題
//ringChart->legend()->setFont(QFont("Arial", 7)); //設(shè)置圖例字體
m_ringView = new QChartView(ringChart);
m_ringView->setRenderHint(QPainter::Antialiasing); //設(shè)置渲染屬性
QGridLayout *ringLayout = new QGridLayout();
ringLayout->addWidget(m_ringView);
ui->widget_ring->setLayout(ringLayout);
}
5.widget.ui
這里進行了布局設(shè)置，這樣界面內(nèi)容會跟隨界面大小拉伸
總結(jié)
Qt Charts模塊提供了一系列容易使用的圖表組件，需要使用charts組件時，需要導(dǎo)入這個模塊，所以在pro文件中一定不要忘記添加“QT += charts”。這里只是簡單的使用該模塊來實現(xiàn)餅狀圖的繪制，要學(xué)習(xí)charts模塊還可以通過Qt Creator里面相關(guān)的示例。在安裝Qt Creator的時候，需要勾選上這個模塊，不然是不能使用的！
本示例完整代碼百度網(wǎng)盤鏈接：https://pan.baidu.com/s/1RAxh-VMrC12FzvxwNsTRwQ
提取碼：xxcj
hello：
共同學(xué)習(xí)，共同進步，如果還有相關(guān)問題，可在評論區(qū)留言進行討論。文章來源：http://www.zghlxwxcb.cn/news/detail-479602.html
參考文章：Qt之餅圖
QChart之QPieSeries繪制餅狀圖文章來源地址http://www.zghlxwxcb.cn/news/detail-479602.html
到了這里，關(guān)于QChart實現(xiàn)ui界面上指定位置餅狀圖、圓環(huán)圖的繪制的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
