ChartDirector应用笔记（二）

关于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对象的指针，其他的成员主要用于窗口布局。

 class XYChartDemo : public QDialog
 {
     Q_OBJECT

 public:
     XYChartDemo(QWidget *parent = );
     ~XYChartDemo();

 private:
     Ui::XYChartDemoClass ui;

     ImagePanel* m_panel;
     QPushButton* m_quitBtn;
     QPushButton* m_saveAsBtn;
     QVBoxLayout* vlayout;
     QHBoxLayout* m_layout;
 };

xychartdemo.cpp：

 XYChartDemo::XYChartDemo(QWidget *parent)
     : QDialog(parent)
 {
     ui.setupUi(this);

     //setGeometry(40, 30 ,460, 310);
     setFixedSize(, );

     m_quitBtn = new QPushButton("Quit");
     m_saveAsBtn = new QPushButton("Save as...");

     m_layout = new QHBoxLayout;
     m_panel = new ImagePanel;
     m_layout->addWidget(m_panel, );

     vlayout = new QVBoxLayout;
     vlayout->addWidget(m_quitBtn);
     vlayout->addWidget(m_saveAsBtn);
     vlayout->addStretch();
     m_layout->addLayout(vlayout);
     setLayout(m_layout);

     connect(m_quitBtn, SIGNAL(clicked()), this, SLOT(close()));
     connect(m_saveAsBtn, SIGNAL(clicked()), m_panel, SLOT(onSaveAs()));
 }

 XYChartDemo::~XYChartDemo()
 {
     delete m_panel;
     delete m_quitBtn;
     delete m_saveAsBtn;

     delete vlayout;  // the sublayout should be destroyed first.
     delete m_layout;
 }

构造函数首先对窗口组件进行初始化，添加好布局响应后设置了两个信号槽。第一个连接用于响应“quit”按钮，退出程序；第二个连接用于响应“保存”按钮，用户点击之后即将当前绘制的图表保存为指定格式。析构函数中对组件资源进行了释放，防止内存泄露。
imagepanel.h：

 class ImagePanel : public QWidget
 {
     Q_OBJECT

 public:
     ImagePanel(QWidget *parent = );
     ~ImagePanel();

 protected slots:
     void onSaveAs();

 private:
     QChartViewer* m_qViewer;
     XYChart* m_chart;
 };

ImagePanel类继承自QWidget类，用于图表显示。该类包含一个指向QChartViewer对象的指针和一个指向XYChart对象的指针。QChartViewer类在前面说过了，是一个继承自QLabel类的组件类，连接ChartDirector类库和Qt框架。再看看实现文件imagepanel.cpp：

 ImagePanel::ImagePanel(QWidget *parent)
     : QWidget(parent)
 {
     m_qViewer = new QChartViewer(this);

     const double data[] = {, , , , };
     const char* lbels[] = {"Mon", "Tue", "Wed", "Thu", "Fri"};

     m_chart = new XYChart(, );
     m_chart->setPlotArea(, , , );

     // set the color of bar.
     BarLayer* blayer = m_chart->addBarLayer(DoubleArray(data, (int)(sizeof(data)/sizeof(data[]))), 0xFF);
     m_chart->xAxis()->setLabels(StringArray(lbels, (int)(sizeof(lbels)/sizeof(lbels[]))));

     blayer->setBarGap(0.5);

     m_qViewer->setChart(m_chart);
 }

如上一篇文件所说的那样，先分配一个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文件复制到生成的可执行文件所在的目录下才能运行，当然其他方法也是存在的。后续将陆续放出更为复杂的图表应用实例。