关于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文件复制到生成的可执行文件所在的目录下才能运行,当然其他方法也是存在的。后续将陆续放出更为复杂的图表应用实例。