文章目錄

• 前言
• • 1.介紹
  • 2.效果
• 一、實現（以下代碼必要部分都已加注釋）
• • 1.集成后的CMyChart
  • 2.柱狀圖實現
  • 3.餅狀圖實現
  • 4.折線圖實現
  • 5.曲線圖實現
• 二、使用

前言

項目源碼： 傳送門
|版本聲明：山河君，未經博主允許，禁止轉載

1.介紹

Qt圖標（Qt Charts）出現晚于QWT、QCustomPlot，界面看起來也很優美，最主要的是要比后兩種實現起來方便許多，當然，在自主靈活性上面就差了一點。
QChart已經集成在Qt5.7中，使用時在項目文件中加QT += charts即可，不過在安裝Qt過程中，QChart默認時不勾選的，在安裝時需要用戶自行勾選。

2.效果

柱狀圖：可設置標題欄，X軸標題， Y軸標題，柱形顏色，軸刻度，是否顯示提示信息（柱形顏色含義）等

餅狀圖：可設置空心圓、實心圓、點擊扇形彈出（信息可編輯）、提示信息（扇形顏色含義）、空心大小比例，圖形名稱等

折線圖：可多條線一起顯示、X軸名稱、刻度尺，Y軸名稱、刻度尺，提示信息，圖形名稱，X軸為時間軸等

曲線圖：可多條線一起顯示、X軸名稱、刻度尺，Y軸名稱、刻度尺，提示信息，圖形名稱，X軸為時間軸等

一、實現（以下代碼必要部分都已加注釋）

1.集成后的CMyChart

由于我的負責的項目中，以上四種圖形都需要使用，所以使用開閉將這四種集成了一下，如果只使用一種，那么這一部分可以過濾不看，只需要將項目中的文件單獨拿出來即可。
調用順序：GetChartWithType->SetAxisXRange/SetAxisYRange/SetDateTimeAxisX->SetAxisXTitle/SetAxisYTitle->AppendSeries
頭文件

#ifndef CMYCHART_H #define CMYCHART_H#include <QObject> #include <QtCharts>QT_CHARTS_USE_NAMESPACEstruct BarDateInfo {QString qsKey;QVector<qreal> vecVal; };class CMyChart : public QObject {Q_OBJECTpublic:enum EType{eInvalid, //無效eBarChart, //柱狀圖ePieChart, //餅狀圖eLineChart, //折線圖eSplineChart //曲線圖};enum EColor{eBlue, //藍色eGreen, //綠色eYellow, //黃色ePurple, //紫色eRed, //紅色eLightBlue, //淡藍色eLightGreen, //淡綠色eLightYellow, //淡黃色eLightPurple, //淡紫色};public:CMyChart(const CMyChart::EType& type, QChartView* pView, QObject *parent = nullptr);virtual ~CMyChart();public://根據選擇的圖形，返回CMyChartstatic CMyChart* GetChartWithType(const EType& eType, QChartView* pView);//根據傳入顏色轉換成QColorQColor toQColor(const EColor& eColor);public://清空界面上顯示的圖形virtual void ClearGraphical() = 0;//設置提示信息是否顯示void SetLegend(bool bLegend = true);//設置標題欄void SetTitle(const QString& qsTitle);//設置X軸坐標、刻度尺，柱狀圖、餅狀圖調此接口無用virtual void SetAxisXRange(const qreal& qMin = 0, const qreal& qMax = 10, const int& nTickCount = 5){};//設置Y軸坐標、刻度尺，柱狀圖、餅狀圖調此接口無用virtual void SetAxisYRange(const qreal& qMin = 0, const qreal& qMax = 10, const int& nTickCount = 5){};//設置時間坐標軸，柱狀圖、餅狀圖調此接口無用virtual void SetDateTimeAxisX(const QDateTime& dtStart,const QDateTime& dtEnd,const QString& qsFormat = "yyyy-MM-dd",const int& nTickCount = 5){};//設置X軸標題，餅狀圖調此接口無用virtual void SetAxisXTitle(const QString& qsAxisXTitle){};//設置Y軸標題，柱狀圖調此接口無用virtual void SetAxisYTitle(const QString& qsAxisYTitle){};//柱狀圖添加一組數據virtual void AppendSeries(const QString& qsAxisXName,QMap<QString, qreal>& mapData,const QVector<EColor>& vecColors = m_vecDefCol){};//餅狀圖添加數據virtual void AppendSeries(QMap<QString, qreal>& mapData, const QVector<EColor>& vecColors = m_vecDefCol){};//折線圖、曲線圖添加一條線virtual void AppendSeries(const QString& name, QMap<qreal, qreal> mapVal){};//折線圖、曲線圖添加坐標軸為時間的一條線virtual void AppendSeries(const QString& name, QMap<QDateTime, qreal> mapVal){};public:EType m_eType;QChart* m_pChart;QChartView* m_pChartView;static QVector<EColor> m_vecDefCol; //默認顏色順序 };#endif // CMYCHART_H

源文件：

#include "CMyChart.h" #include "CMyBarChart.h" #include "CMyPieChart.h" #include "CMyLineChart.h" #include "CMySplineChart.h"QVector<CMyChart::EColor> CMyChart::m_vecDefCol = {eBlue, eGreen, eYellow, ePurple, eRed, eLightBlue, eLightGreen, eLightYellow, eLightPurple};CMyChart::CMyChart(const CMyChart::EType& type, QChartView* pView, QObject *parent): QObject (parent), m_eType(type), m_pChartView(pView) {m_pChart = new QChart;m_pChart->setAnimationOptions(QChart::SeriesAnimations);m_pChart->legend()->setVisible(true); //設置提示打開（默認打開）m_pChart->legend()->show(); //顯示提示m_pChart->layout()->setContentsMargins(0, 0, 0, 0); //設置布局邊距m_pChart->setMargins(QMargins(0, 0, 0, 0)); //設置控件邊距m_pChart->setBackgroundRoundness(0); //保存圖表背景角上的圓角的直徑。m_pChartView->setChart(m_pChart);m_pChartView->setRenderHint(QPainter::Antialiasing); //防圖形走樣 }CMyChart::~CMyChart() {}CMyChart* CMyChart::GetChartWithType(const EType &eType, QChartView *pView) {if(pView == NULL)return NULL;switch (eType){case eInvalid:return NULL;case eBarChart:return new CMyBarChart(eType, pView);case ePieChart:return new CMyPieChart(eType, pView);case eLineChart:return new CMyLineChart(eType, pView);case eSplineChart:return new CMySplineChart(eType, pView);default:return NULL;} }QColor CMyChart::toQColor(const EColor &eColor) {switch (eColor){case eBlue:return QColor(0, 122, 255);case eGreen:return QColor(27, 201, 133);case eYellow:return QColor(255,168, 0);case ePurple:return QColor(37, 217, 255);case eRed:return QColor(252, 79, 76);case eLightBlue:return QColor(104, 153, 255);case eLightGreen:return QColor(37, 217, 255);case eLightYellow:return QColor(255, 211, 35);case eLightPurple:return QColor(212, 139, 250);default:return QColor(0, 122, 255);} }void CMyChart::SetLegend(bool bLegend) {if(bLegend)m_pChart->legend()->show();elsem_pChart->legend()->hide(); }void CMyChart::SetTitle(const QString &qsTitle) {m_pChart->setTitle(qsTitle); }

2.柱狀圖實現

頭文件：

#ifndef CMYBARCHART_H #define CMYBARCHART_H#include <QObject> #include "CMyChart.h"class CMyBarChart : public CMyChart {Q_OBJECT public:explicit CMyBarChart(const CMyChart::EType& type, QChartView* pView, QObject *parent = nullptr);virtual ~CMyBarChart();public:virtual void ClearGraphical();virtual void SetAxisXTitle(const QString& qsAxisXTitle);virtual void SetAxisYTitle(const QString& qsAxisYTitle);virtual void SetAxisYRange(const qreal& qMin = 0, const qreal& qMax = 10, const int& nTickCount = 5);virtual void AppendSeries(const QString& qsAxisXName,QMap<QString, qreal>& mapData,const QVector<EColor>& vecColors = m_vecDefCol);private:QValueAxis* m_pBarAxisY;QBarSeries* m_pBarSeries;QVector<QBarSet*> m_vecBarSet;QBarCategoryAxis* m_pBarAxisX; };#endif // CMYBARCHART_H

源文件

#include "CMyBarChart.h"CMyBarChart::CMyBarChart(const CMyChart::EType& type, QChartView* pView, QObject *parent): CMyChart(type, pView, parent) {m_pBarSeries = new QBarSeries; //創建分組系列m_pBarSeries->setLabelsVisible(true); //設置顯示柱形圖值m_pBarSeries->setLabelsPosition(QAbstractBarSeries::LabelsInsideEnd); //設置值位置m_pChart->addSeries(m_pBarSeries); //將分組放入chart容器m_pChart->createDefaultAxes(); //創建默認坐標軸m_pChart->legend()->setAlignment(Qt::AlignBottom); //設置提示說明位置m_vecBarSet.fill(NULL, 10); //默認最多只能有10個柱子 }CMyBarChart::~CMyBarChart() {delete m_pBarSeries;delete m_pBarAxisX;delete m_pBarAxisY; }void CMyBarChart::ClearGraphical() {for(QVector<QBarSet*>::iterator it = m_vecBarSet.begin(); it != m_vecBarSet.end(); it++){if(*it != NULL)delete *it;}m_vecBarSet.fill(NULL, 10); //默認最多只有10種類型的柱子m_pBarAxisX->clear();m_pBarSeries->clear(); }void CMyBarChart::SetAxisXTitle(const QString &qsAxisXTitle) {m_pBarAxisX->setTitleText(qsAxisXTitle); }void CMyBarChart::SetAxisYTitle(const QString &qsAxisYTitle) {m_pBarAxisY->setTitleText(qsAxisYTitle); }void CMyBarChart::SetAxisYRange(const qreal& qMin, const qreal& qMax, const int& nTickCount) {m_pBarAxisX = new QBarCategoryAxis; //創建X軸m_pBarAxisY = new QValueAxis; //創建Y軸m_pBarAxisX->setLabelsAngle(-45); //設置X軸坐標傾斜m_pBarAxisY->setGridLineVisible(false); //設置網格不可見m_pBarAxisY->setRange(qMin, qMax);m_pBarAxisY->setTickCount(nTickCount);m_pChart->setAxisX(m_pBarAxisX, m_pBarSeries); //將X坐標軸和分組進行統一m_pChart->setAxisY(m_pBarAxisY, m_pBarSeries); //將Y坐標軸和分組進行統一 }/** 一個QBarSet代表的是同一顏色的柱形，里面存放多個柱子的值* 此接口先將一組數據作為柱子類型數的最大大小，然后根據先后順序給柱子添加數據*/ void CMyBarChart::AppendSeries(const QString &qsAxisXName, QMap<QString, qreal>& mapData, const QVector<EColor> &vecColors) {QMap<QString, qreal>::iterator it = mapData.begin();for(int i = 0; i < mapData.size(); i++){if(m_vecBarSet[i] == NULL){m_vecBarSet[i] = new QBarSet(it.key());m_vecBarSet[i]->setColor(toQColor(vecColors[i]));}m_vecBarSet[i]->append(it.value());m_pBarSeries->append(m_vecBarSet[i]);it++;}m_pBarAxisX->append(qsAxisXName); }

3.餅狀圖實現

頭文件

#ifndef CMYPIECHART_H #define CMYPIECHART_H#include <QObject> #include "CMyChart.h"class CMyPieChart : public CMyChart {Q_OBJECT public:explicit CMyPieChart(const CMyChart::EType& type, QChartView* pView, QObject *parent = nullptr);virtual ~CMyPieChart();public:virtual void ClearGraphical();virtual void AppendSeries(QMap<QString, qreal>& mapData, const QVector<EColor>& vecColors = m_vecDefCol);private slots://點擊扇形槽函數void ClickedSector(QPieSlice* pSlice);private:QPieSeries* m_pPieSeries; };#endif // CMYPIECHART_H

源文件

#include "CMyPieChart.h"CMyPieChart::CMyPieChart(const CMyChart::EType& type, QChartView* pView, QObject *parent): CMyChart(type, pView, parent) {m_pPieSeries = new QPieSeries;m_pPieSeries->setHoleSize(0.5); //設置空心占比m_pPieSeries->setPieSize(0.8); //設置圓形占比m_pChart->addSeries(m_pPieSeries); //將餅圖放入容器m_pChart->legend()->setAlignment(Qt::AlignRight); //設置提示說明位置connect(m_pPieSeries, SIGNAL(clicked(QPieSlice*)), this, SLOT(ClickedSector(QPieSlice*))); //點擊扇形 }CMyPieChart::~CMyPieChart() {delete m_pPieSeries; }void CMyPieChart::ClearGraphical() {m_pPieSeries->clear(); }void CMyPieChart::ClickedSector(QPieSlice* pSlice) {if(pSlice->isExploded()) //判斷扇形有沒有彈出{pSlice->setExploded(false);pSlice->setLabelVisible(false);}else {pSlice->setExploded(true); //設置扇形彈出pSlice->setLabelVisible(true); //設置扇形提示} }void CMyPieChart::AppendSeries(QMap<QString, qreal> &mapData, const QVector<EColor> &vecColors) {m_pPieSeries->clear();QMap<QString, qreal>::iterator it = mapData.begin();for(int i = 0; i < mapData.size(); i++){QPieSlice* pSlice = new QPieSlice(it.key(), it.value());pSlice->setLabel(it.key());pSlice->setColor(toQColor(vecColors[i]));m_pPieSeries->append(pSlice);it++;}}

4.折線圖實現

頭文件

#ifndef CMYLINECHART_H #define CMYLINECHART_H#include <QObject> #include "CMyChart.h"class CMyLineChart : public CMyChart {Q_OBJECT public:explicit CMyLineChart(const CMyChart::EType& type, QChartView* pView, QObject *parent = nullptr);~CMyLineChart();public:virtual void ClearGraphical();virtual void SetAxisXRange(const qreal& qMin = 0, const qreal& qMax = 10, const int& nTickCount = 5);virtual void SetAxisYRange(const qreal& qMin = 0, const qreal& qMax = 10, const int& nTickCount = 5);virtual void SetAxisXTitle(const QString& qsAxisXTitle);virtual void SetAxisYTitle(const QString& qsAxisYTitle);virtual void SetDateTimeAxisX(const QDateTime& dtStart,const QDateTime& dtEnd,const QString& qsFormat = "yyyy-MM-dd",const int& nTickCount = 5);virtual void AppendSeries(const QString& name, QMap<qreal, qreal> mapVal);virtual void AppendSeries(const QString& name, QMap<QDateTime, qreal> mapVal);private:bool m_bIsDateTime;QValueAxis* m_pLineAxisX;QValueAxis* m_pLineAxisY;QDateTimeAxis* m_pAxisDateTime;QVector<QLineSeries*> m_vecLineSeries; };#endif // CMYLINECHART_H

源文件

#include "CMyLineChart.h"CMyLineChart::CMyLineChart(const CMyChart::EType& type, QChartView* pView, QObject *parent): CMyChart(type, pView, parent) {m_bIsDateTime = false; }CMyLineChart::~CMyLineChart() {for(QVector<QLineSeries*>::iterator it = m_vecLineSeries.begin(); it != m_vecLineSeries.end(); it++)delete *it; }void CMyLineChart::ClearGraphical() {for(QVector<QLineSeries*>::iterator it = m_vecLineSeries.begin(); it != m_vecLineSeries.end(); it++)delete *it;m_vecLineSeries.clear(); }void CMyLineChart::SetAxisXRange(const qreal &qMin, const qreal &qMax, const int &nTickCount) {m_pLineAxisX = new QValueAxis;m_pLineAxisX->setRange(qMin, qMax);m_pLineAxisX->setTickCount(nTickCount);m_pChart->addAxis(m_pLineAxisX, Qt::AlignBottom); }void CMyLineChart::SetAxisYRange(const qreal &qMin, const qreal &qMax, const int &nTickCount) {m_pLineAxisY = new QValueAxis;m_pLineAxisY->setRange(qMin, qMax);m_pLineAxisY->setTickCount(nTickCount);m_pLineAxisY->setGridLineVisible(false);m_pChart->addAxis(m_pLineAxisY, Qt::AlignLeft); }void CMyLineChart::SetDateTimeAxisX(const QDateTime &dtStart, const QDateTime &dtEnd, const QString &qsFormat, const int &nTickCount) {m_bIsDateTime = true;m_pAxisDateTime = new QDateTimeAxis;m_pAxisDateTime->setFormat(qsFormat);m_pAxisDateTime->setRange(dtStart, dtEnd);m_pAxisDateTime->setTickCount(nTickCount);m_pChart->addAxis(m_pAxisDateTime, Qt::AlignBottom); }void CMyLineChart::SetAxisXTitle(const QString &qsAxisXTitle) {if(m_bIsDateTime)m_pAxisDateTime->setTitleText(qsAxisXTitle);elsem_pLineAxisX->setTitleText(qsAxisXTitle); }void CMyLineChart::SetAxisYTitle(const QString &qsAxisYTitle) {m_pLineAxisY->setTitleText(qsAxisYTitle); }void CMyLineChart::AppendSeries(const QString &name , QMap<qreal, qreal> mapVal) {QLineSeries* pLineSeries = new QLineSeries;pLineSeries->setName(name);pLineSeries->setPointsVisible(true);pLineSeries->setPointLabelsVisible(true); //設置顯示點位m_pChart->addSeries(pLineSeries);for(QMap<qreal, qreal>::iterator it = mapVal.begin(); it != mapVal.end(); it++)pLineSeries->append(it.key(), it.value());m_vecLineSeries.push_back(pLineSeries);pLineSeries->attachAxis(m_pLineAxisX);pLineSeries->attachAxis(m_pLineAxisY); }void CMyLineChart::AppendSeries(const QString &name, QMap<QDateTime, qreal> mapVal) {QLineSeries* pLineSeries = new QLineSeries;pLineSeries->setName(name);pLineSeries->setPointsVisible(true);pLineSeries->setPointLabelsVisible(false); //設置顯示點位m_pChart->addSeries(pLineSeries);for(QMap<QDateTime, qreal>::iterator it = mapVal.begin(); it != mapVal.end(); it++)pLineSeries->append(it.key().toMSecsSinceEpoch(), it.value());m_vecLineSeries.push_back(pLineSeries);pLineSeries->attachAxis(m_pAxisDateTime);pLineSeries->attachAxis(m_pLineAxisY); }

5.曲線圖實現

頭文件

#ifndef CMYSPLINECHART_H #define CMYSPLINECHART_H#include <QObject> #include "CMyChart.h"class CMySplineChart : public CMyChart {Q_OBJECT public:explicit CMySplineChart(const CMyChart::EType& type, QChartView* pView, QObject *parent = nullptr);~CMySplineChart();public:virtual void ClearGraphical();virtual void SetAxisXRange(const qreal& qMin = 0, const qreal& qMax = 10, const int& nTickCount = 5);virtual void SetAxisYRange(const qreal& qMin = 0, const qreal& qMax = 10, const int& nTickCount = 5);virtual void SetAxisXTitle(const QString& qsAxisXTitle);virtual void SetAxisYTitle(const QString& qsAxisYTitle);virtual void SetDateTimeAxisX(const QDateTime& dtStart,const QDateTime& dtEnd,const QString& qsFormat = "yyyy-MM-dd",const int& nTickCount = 5);virtual void AppendSeries(const QString& name, QMap<qreal, qreal> mapVal);virtual void AppendSeries(const QString& name, QMap<QDateTime, qreal> mapVal);signals:public slots:private:bool m_bIsDateTime;QValueAxis* m_pLineAxisX;QValueAxis* m_pLineAxisY;QDateTimeAxis* m_pAxisDateTime;QVector<QSplineSeries*> m_vecSplineSeries; };#endif // CMYSPLINECHART_H

源文件

#include "CMySplineChart.h"CMySplineChart::CMySplineChart(const CMyChart::EType& type, QChartView* pView, QObject *parent): CMyChart(type, pView, parent) {m_bIsDateTime = false; }CMySplineChart::~CMySplineChart() {for(QVector<QSplineSeries*>::iterator it = m_vecSplineSeries.begin(); it != m_vecSplineSeries.end(); it++)delete *it; }void CMySplineChart::ClearGraphical() {for(QVector<QSplineSeries*>::iterator it = m_vecSplineSeries.begin(); it != m_vecSplineSeries.end(); it++)delete *it;m_vecSplineSeries.clear(); }void CMySplineChart::SetAxisXRange(const qreal &qMin, const qreal &qMax, const int &nTickCount) {m_pLineAxisX = new QValueAxis;m_pLineAxisX->setRange(qMin, qMax);m_pLineAxisX->setTickCount(nTickCount);m_pChart->addAxis(m_pLineAxisX, Qt::AlignBottom); }void CMySplineChart::SetAxisYRange(const qreal &qMin, const qreal &qMax, const int &nTickCount) {m_pLineAxisY = new QValueAxis;m_pLineAxisY->setRange(qMin, qMax);m_pLineAxisY->setTickCount(nTickCount);m_pLineAxisY->setGridLineVisible(false);m_pChart->addAxis(m_pLineAxisY, Qt::AlignLeft); }void CMySplineChart::SetDateTimeAxisX(const QDateTime &dtStart, const QDateTime &dtEnd, const QString &qsFormat, const int &nTickCount) {m_bIsDateTime = true;m_pAxisDateTime = new QDateTimeAxis;m_pAxisDateTime->setFormat(qsFormat);m_pAxisDateTime->setRange(dtStart, dtEnd);m_pAxisDateTime->setTickCount(nTickCount);m_pChart->addAxis(m_pAxisDateTime, Qt::AlignBottom); }void CMySplineChart::SetAxisXTitle(const QString &qsAxisXTitle) {if(m_bIsDateTime)m_pAxisDateTime->setTitleText(qsAxisXTitle);elsem_pLineAxisX->setTitleText(qsAxisXTitle); }void CMySplineChart::SetAxisYTitle(const QString &qsAxisYTitle) {m_pLineAxisY->setTitleText(qsAxisYTitle); }void CMySplineChart::AppendSeries(const QString &name , QMap<qreal, qreal> mapVal) {QSplineSeries* pSplineSeries = new QSplineSeries;pSplineSeries->setName(name);pSplineSeries->setPointsVisible(true);pSplineSeries->setPointLabelsVisible(true); //設置顯示點位m_pChart->addSeries(pSplineSeries);for(QMap<qreal, qreal>::iterator it = mapVal.begin(); it != mapVal.end(); it++)pSplineSeries->append(it.key(), it.value());m_vecSplineSeries.push_back(pSplineSeries);pSplineSeries->attachAxis(m_pLineAxisX);pSplineSeries->attachAxis(m_pLineAxisY); }void CMySplineChart::AppendSeries(const QString &name, QMap<QDateTime, qreal> mapVal) {QSplineSeries* pSplineSeries = new QSplineSeries;pSplineSeries->setName(name);pSplineSeries->setPointsVisible(true);pSplineSeries->setPointLabelsVisible(false); //設置顯示點位m_pChart->addSeries(pSplineSeries);for(QMap<QDateTime, qreal>::iterator it = mapVal.begin(); it != mapVal.end(); it++)pSplineSeries->append(it.key().toMSecsSinceEpoch(), it.value());m_vecSplineSeries.push_back(pSplineSeries);pSplineSeries->attachAxis(m_pAxisDateTime);pSplineSeries->attachAxis(m_pLineAxisY); }

二、使用

使用QChart需要對于widget進行提升

項目源碼：傳送門

碼字不易，各位觀眾老爺，如果覺得有點用，還請點個贊，讓我漲漲積分哈！

總結

以上是生活随笔為你收集整理的Qt实现柱状图、饼状图、折线图、曲线图的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。