關於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文件復制到生成的可執行文件所在的目錄下才能運行，當然其他方法也是存在的。后續將陸續放出更為復雜的圖表應用實例。