Qt之如何建立並顯示一個柱狀圖
阿新 • • 發佈:2020-09-06
建立一個簡單的柱狀圖
第一步:建立一個QBarSet物件;QBarSet類代表條形圖中的一組條形。
QBarSet *set0 = new QBarSet("Jane"); QBarSet *set1 = new QBarSet("John"); QBarSet *set2 = new QBarSet("Axel"); QBarSet *set3 = new QBarSet("Mary"); QBarSet *set4 = new QBarSet("Samantha");
這樣的話相當於我們建立了五個條組,也就是說會有五組資料。
第二步:接下來為這五個條組新增資料
*set0 << 1<< 2 << 3 << 4 << 13 << 6; *set1 << 5 << 0 << 0 << 4 << 15 << 7; *set2 << 3 << 5 << 8 << 13 << 8 << 5; *set3 << 5 << 6 << 7 << 3 << 4 << 5; *set4 << 9 << 7<< 5 << 3 << 1 << 2;
第三步:建立一個QBarSeries物件,QBarSeries類將一系列資料顯示為按類別分組的豎線。
QBarSeries *series = new QBarSeries(); series->append(set0); series->append(set1); series->append(set2); series->append(set3); series->append(set4);
第四步:建立一個QChart用來裝QBarSeries物件;QChart是一個QGraphicsWidget,可以在QGraphicsScene中顯示。
QChart *chart = new QChart(); chart->addSeries(series); chart->setTitle("Simple barchart example"); chart->setAnimationOptions(QChart::SeriesAnimations);
第五步:建立一個QChartView來顯示錶格
QChartView *chartView = new QChartView(chart);
第六步:將QChartView新增到一個主視窗然後顯示出來。
QMainWindow window; window.setCentralWidget(chartView); window.resize(420, 300); window.show();
然後我們執行就能看到下面這樣一個柱狀圖。
柱狀圖優化
雖然我們已經成功的顯示出了一個條形圖,但是這樣看上去好像並不是很美觀,在實際應用中也會達不到我們想要的效果。然後我們再稍微給它優化一下。
首先給它新增一個座標軸
QStringList categories; categories << "Jan" << "Feb" << "Mar" << "Apr" << "May" << "Jun"; //儲存橫座標字串的列表 QBarCategoryAxis *axis = new QBarCategoryAxis(); axis->append(categories); chart->createDefaultAxes(); //建立一個預設的座標軸 chart->setAxisX(axis, series); //設定X座標軸
然後讓它把標籤資料顯示出來
series->setLabelsPosition(QAbstractBarSeries::LabelsInsideEnd); //設定標籤顯示的位置 series->setLabelsVisible(true); //設定資料標籤可見
這樣我們就得到了下面這樣一個柱狀圖。
然後我們可以給表格設定一個主題
chart->setTheme(QChart::ChartThemeBlueCerulean);
可以把設定圖例的位置設定到下方
chart->legend()->setAlignment(Qt::AlignBottom);
最後看效果,這樣子看上去就好了很多對吧。
最後,當我們想把圖表顯示到我們的佈局中去該怎麼顯示呢?
當我們試圖把QChartView新增到一個QWidget上去時發現我們無法做到,這裡的話我們就需要藉助QHBoxLayout了。
就像下面這樣:
//... QWidget *widget = new QWidget(); QHBoxLayout m_pHLayout = new QHBoxLayout(); m_pHLayout->addWidget(chartView); widget->setLayout(m_pHLayout); //...
最後希望對你有所幫助。