ChartDirector應用筆記（二）

24K純開源發表於2013-12-29
筆記

關於Simple Bar Chart

Simple bar chart是XYChart大類中的Bar chart型別中的最簡單的例子。Bar chart的表現形式簡單直觀，在資料量較少、資料維度簡單等場景下有較好的適用性。對於一個Bar chart，具有倆個重要的組成部分：XY座標系，Bars。XY座標具有座標值、名稱等屬性，Bar之間具有顏色、間距、寬度等屬性。下面的應用例項以Qt為基礎，編寫了一個簡單的對話方塊程式，展示了ChartDirector類庫和Qt結合的一般形式。

效果圖

圖表資料是隨意新增的，新增了儲存功能，目前只能儲存為內建的檔名和檔案格式。

關鍵程式碼解讀

原始碼主要分成兩個部分：第一部分是主視窗布局，以XYChartDemo類為主；第二部分實現圖表顯示，以ImagePanel類為主。下面分別說明：

xychartdemo.h：XYChartDemo類繼承自QDialog類，負責視窗繪製和顯示。成員包含一個指向ImagePanel物件的指標，其他的成員主要用於視窗布局。

 1 class XYChartDemo : public QDialog
 2 {
 3     Q_OBJECT
 4 
 5 public:
 6     XYChartDemo(QWidget *parent = 0);
 7     ~XYChartDemo();
 8 
 9 private:
10     Ui::XYChartDemoClass ui;
11 
12     ImagePanel* m_panel;
13     QPushButton* m_quitBtn;
14     QPushButton* m_saveAsBtn;
15     QVBoxLayout* vlayout;
16     QHBoxLayout* m_layout;
17 };

xychartdemo.cpp：

 1 XYChartDemo::XYChartDemo(QWidget *parent)
 2     : QDialog(parent)
 3 {
 4     ui.setupUi(this);
 5 
 6     //setGeometry(40, 30 ,460, 310);
 7     setFixedSize(480, 310);
 8     
 9     m_quitBtn = new QPushButton("Quit");
10     m_saveAsBtn = new QPushButton("Save as...");
11 
12     m_layout = new QHBoxLayout;
13     m_panel = new ImagePanel;
14     m_layout->addWidget(m_panel, 1);
15 
16     vlayout = new QVBoxLayout;
17     vlayout->addWidget(m_quitBtn);
18     vlayout->addWidget(m_saveAsBtn);
19     vlayout->addStretch(1);
20     m_layout->addLayout(vlayout);
21     setLayout(m_layout);
22 
23     connect(m_quitBtn, SIGNAL(clicked()), this, SLOT(close()));
24     connect(m_saveAsBtn, SIGNAL(clicked()), m_panel, SLOT(onSaveAs()));
25 }
26 
27 XYChartDemo::~XYChartDemo()
28 {
29     delete m_panel;
30     delete m_quitBtn;
31     delete m_saveAsBtn;
32 
33     delete vlayout;  // the sublayout should be destroyed first.
34     delete m_layout;
35 }

建構函式首先對視窗元件進行初始化，新增好佈局響應後設定了兩個訊號槽。第一個連線用於響應“quit”按鈕，退出程式；第二個連線用於響應“儲存”按鈕，使用者點選之後即將當前繪製的圖表儲存為指定格式。解構函式中對元件資源進行了釋放，防止記憶體洩露。
imagepanel.h：

 1 class ImagePanel : public QWidget
 2 {
 3     Q_OBJECT
 4 
 5 public:
 6     ImagePanel(QWidget *parent = 0);
 7     ~ImagePanel();
 8 
 9 protected slots:
10     void onSaveAs();
11 
12 private:
13     QChartViewer* m_qViewer;
14     XYChart* m_chart;
15 };

ImagePanel類繼承自QWidget類，用於圖表顯示。該類包含一個指向QChartViewer物件的指標和一個指向XYChart物件的指標。QChartViewer類在前面說過了，是一個繼承自QLabel類的元件類，連線ChartDirector類庫和Qt框架。再看看實現檔案imagepanel.cpp：

 1 ImagePanel::ImagePanel(QWidget *parent)
 2     : QWidget(parent)
 3 {
 4     m_qViewer = new QChartViewer(this);
 5 
 6     const double data[] = {34, 56, 12, 58, 98};
 7     const char* lbels[] = {"Mon", "Tue", "Wed", "Thu", "Fri"};
 8 
 9     m_chart = new XYChart(400, 300);
10     m_chart->setPlotArea(35, 25, 335, 240);
11 
12     // set the color of bar.
13     BarLayer* blayer = m_chart->addBarLayer(DoubleArray(data, (int)(sizeof(data)/sizeof(data[0]))), 0xFF);
14     m_chart->xAxis()->setLabels(StringArray(lbels, (int)(sizeof(lbels)/sizeof(lbels[0]))));
15 
16     blayer->setBarGap(0.5);
17 
18     m_qViewer->setChart(m_chart);
19 }

如上一篇檔案所說的那樣，先分配一個XYChart物件。傳遞繪製區域（400, 300）作為引數呼叫XYChart的建構函式構造一個XYChart物件；然後呼叫setPlotArea設定好XY座標系的位置的座標區域。在該座標區域內，可以繪製各種線條和圖形。值得注意的是，X、Y軸上面的座標值和座標名並不屬於PlotArea區域。呼叫addBarLayer()是一個較為重要的步驟，這裡因為要繪製的是Bar chart, 所以使用了addBarLayer()。注意該函式的最後一個引數，0xFF指定了繪製出來的Bar的顏色。需要設定為其他顏色的Bar可以在這裡設定。然後就是呼叫xAxis()等函式設定座標引數，setChart()函式用於將chart物件設定到QChartViewer物件。這樣，就可以在Qt視窗中看到ChartDirector繪製的圖表了。

小結

總的來說，繪製過程還是比較簡單的。當然，這個圖表只是一個較為簡單的例子，所以在流程上和程式碼上並無複雜性可言。本程式碼在編寫過程中使用了VS2010作為編輯器，所以在呼叫ChartDirector的時候只需要在專案屬性中設定好庫的路徑即可。另外，還需在主程式執行前指定載入lib檔案：#pragma comment(lib, "chartdir51.lib")。最後，還需要加ChartDirector庫的dll檔案複製到生成的可執行檔案所在的目錄下才能執行，當然其他方法也是存在的。後續將陸續放出更為複雜的圖表應用例項。

相關文章