Qt 之 餅圖

  Qt 有許多模塊，如 Core、GUI、Widgets、WebEngine、QML等。其中 Charts 模塊，包含了一系列有關圖表的組件，使用的是 Qt 的 Graphics View 框架，該模塊之前只在商業版中才有。

  從 Qt 5.7 開始，該模塊經過 GPLv3 許可，已經對 Qt 開源版開放使用。

1  餅圖 (pie chart)

1.1  Charts 模塊

  .pro 中添加以下語句：

QT  += charts

  頭文件和命名空間

#include <QtCharts>

using namespace QtCharts;

1.2  代碼示例

1） 頭文件

  Qt  中實現餅圖的例程，主要使用了 QPieSeries + QPieSlice + QChart + QChartView 這四個類，以下所示： #1 ~ #5 聲明瞭頭文件

1 #include <QtWidgets/QApplication>
2 #include <QtWidgets/QMainWindow>
3 #include <QtCharts/QChartView>
4 #include <QtCharts/QPieSeries>
5 #include <QtCharts/QPieSlice>
6 
7 using namespace QtCharts;

  實際上也可用兩個頭文件代替：

#include <QtWidgets>
#include <QtCharts>

2） QPieSeries 類

#13 ~ #16 新建 QPieSeries 類指針，並將其分爲三份，各佔 10%，20% 和 70%；#17 設置標籤屬性，使其可見；

 9 int main(int argc, char *argv[])
10 {
11     QApplication a(argc, argv);
12 
13     QPieSeries *series = new QPieSeries();
14     series->append("10%", 1);
15     series->append("20%", 2);
16     series->append("70%", 7);
17     series->setLabelsVisible();

3） QPieSlice 類

  #19 ~ #24 使用 QPieSlice 設置每一份的顏色，分別爲：紅、綠、藍；

19     QPieSlice *slice_red = series->slices().at(0);
20     QPieSlice *slice_green = series->slices().at(1);
21     QPieSlice *slice_blue = series->slices().at(2);
22     slice_red->setColor(QColor(255,0,0,255));
23     slice_green->setColor(QColor(0,255,0,255));
24     slice_blue->setColor(QColor(0,0,255,255));

4） QChart  和 QChartView

  #26 ~ #29 新建 QChart 類指針，並將 series 添加到 chart 中，而後設置標題和隱藏圖例；

  #31 ~ #32 新建 QChartView 類指針，而後將 chart 添加到 chartview 中，設置其渲染屬性爲 「抗混疊」 (QPainter::Antialiasing)；

  #34 ~ #37 新建 QMainWindow 類對象，並將 chartview 置於中間 (setCentralWidget() 函數)，而後重設其大小，並 show() 出來。

26     QChart *chart = new QChart();
27     chart->addSeries(series);
28     chart->setTitle("PieChart Example");
29     chart->legend()->hide();
30 
31     QChartView *chartview = new QChartView(chart);
32     chartview->setRenderHint(QPainter::Antialiasing);
33 
34     QMainWindow window;
35     window.setCentralWidget(chartview);
36     window.resize(480, 360);
37     window.show();
38 
39     return a.exec();
40 }

   輸出以下：

 

2  圓環圖 (donut chart)

  #4 用的是 Qt 中的命名空間聲明，等效於 using namespace QtCharts

  圓環圖中間有空，對應 #11，設置了中間孔的尺寸大小；另外，#21 設置了圓環圖的顯示主題，#22 設置的是圖例的字體；其它代碼，餅圖的大同小異。

 1 #include <QtWidgets>
 2 #include <QtCharts>
 3 
 4 QT_CHARTS_USE_NAMESPACE
 5 
 6 int main(int argc, char *argv[])
 7 {
 8     QApplication a(argc, argv);
 9 
10     QPieSeries *series = new QPieSeries();
11     series->setHoleSize(0.35);
12     series->append("Protein 4.2%", 4.2);
13     series->append("Carbs 56.4%", 56.4);
14     series->append("Other 23.8%", 23.8);
15 
16     QChartView *chartView = new QChartView();
17     chartView->setRenderHint(QPainter::Antialiasing);
18     chartView->chart()->setTitle("DonutChart Example");
19     chartView->chart()->addSeries(series);
20     chartView->chart()->legend()->setAlignment(Qt::AlignBottom);
21     chartView->chart()->setTheme(QChart::ChartThemeBlueCerulean);
22     chartView->chart()->legend()->setFont(QFont("Arial", 7));
23 
24     QMainWindow window;
25     window.setCentralWidget(chartView);
26     window.resize(400, 300);
27     window.show();
28 
29     return a.exec();
30 }

   輸出界面以下：

   

 

參考資料：

  Qt 5.8 | Qt Charts | Qt Charts Examples | PieChart Example