1 背景介紹
自從開發使用Qt後一直尋找一款Qt下的圖形控件庫，網上有很多推薦的文章推薦使用ChartDirector和QWT，由于以前在Java下使用了比較多的基于WEB的圖表開源控件，例如：Jfreechart和ECharts。在試用ChartDirector和QWT後發現QT上的圖形曲線繪制和JS的圖庫比較起來真是弱爆了！尤其是動态資料大資料的繪制，JS真是速度，而且滑鼠懸停的數值提示效果，超連結等功能，個人還是推薦與JS的開源圖庫結合。
注： 本文主要是以靜态報表為例，若要實作動态報表，以及要使用QT5.6及QT5.6最新的技術請參看本人的另一篇博文《QT5.5或QT5.6與echarts實作動态圖表》， 連結位址：http://blog.csdn.net/liuyez123/article/details/50532091 。
下面是QT中使用ECharts的效果圖：
QT5中使用Echarts圖表元件1 背景介紹2 開發例子 
QT5中使用Echarts圖表元件1 背景介紹2 開發例子 QT5中使用Echarts圖表元件1 背景介紹2 開發例子 QT5中使用Echarts圖表元件1 背景介紹2 開發例子
qwebkit為c++和html建起了一個溝通的橋梁,讓軟體的底層開發和ui的開發解耦,隻要底層的api足夠穩定強大,那ui的開發就算變化多端都會很輕松了(對于qt c++開發者來說,不用編譯了...^ _ ^),同時可以即時更新ui,或者淘汰舊的版本(更換本地或服務端的html即可),或者增加js統計..等等。同時在項目團隊中可以很友善的将UI開發和底層開發分開進行。
2 開發例子
2.1 建立QT5項目
建立QT5項目，在"Project Settings"裡面選中“WebKit”和“Webkit Widgets”選項:
QT5中使用Echarts圖表元件1 背景介紹2 開發例子
2.2 添加頭檔案
#include<QtGui>
#include<QtWebKit>
#include<QWebView>
2.3 解析内容
2.3.1 解析http形式的url
使用QWebView的setUrl方法,示例如下：
QWebView view;
view.show();
view.setUrl(QUrl("http://www.cnblogs.com/ "));
2.3.2 解析本地檔案
使用QWebView的setUrl方法,示例如下：
QWebView view;
view.show();
view.setUrl(QUrl("file:///E:/tmp/1.html"));
2.3.3 解析html字元串
使用QWebView的setHtml方法,示例如下：
QApplicationapp(argc, argv);
QWebViewview;
view.show();
std::ifstreamfin("E:/tmp/1.html");
std::stringstreambuffer; buffer << fin.rdbuf();
fin.close();
view.setHtml(buffer.str().c_str());
下面是上面示例圖中的例子的完整代碼如下：
EchartDemo.pro檔案内容如下：
#-------------------------------------------------
#
# Project created byQtCreator 2015-12-12T19:45:18
#
#-------------------------------------------------
QT += core gui webkit
greaterThan(QT_MAJOR_VERSION,4): QT += widgets webkitwidgets multimedia multimediawidgets
TARGET = EchartDemo
TEMPLATE = app
SOURCES += main.cpp\
widget.cpp
HEADERS += widget.h
FORMS += widget.ui
INCLUDEPATH += $$PWD
MOC_DIR = temp/moc
RCC_DIR = temp/rcc
UI_DIR = temp/ui
OBJECTS_DIR =temp/obj
DESTDIR = bin
widget.h内容如下：
#ifndef WIDGET_H
#defineWIDGET_H
#include<QWidget>
namespace Ui {
classWidget;
}
classWidget :publicQWidget
{
Q_OBJECT
public:
explicit Widget(QWidget *parent = 0);
~Widget();
privateslots:
void on_btnLine_clicked();
void on_btnLinex_clicked();
void on_btnLiney_clicked();
void on_btnBar_clicked();
void on_btnBarx_clicked();
void on_btnBary_clicked();
void on_btnScatter_clicked();
void on_btnK_clicked();
void on_btnPie_clicked();
void on_btnRadar_clicked();
void on_btnChord_clicked();
void on_btnGauge_clicked();
void on_btnFunnel_clicked();
void on_btnData_clicked();
private:
Ui::Widget *ui;
};
#endif// WIDGET_H
main.cpp内容如下：
#include"widget.h"
#include<QApplication>
#include<QTextCodec>
int main(intargc,char *argv[])
{
QApplication a(argc,argv);
Widget w;
w.showMaximized();
return a.exec();
}
widget.cpp内容如下：
#include"widget.h"
#include"ui_widget.h"
Widget::Widget(QWidget *parent) :
QWidget(parent),
ui(new Ui::Widget)
{
ui->setupUi(this);
ui->btnLine->click();
}
Widget::~Widget()
{
delete ui;
}
voidWidget::on_btnLine_clicked()
{
ui->webView->load(QUrl("file:///"+qApp->applicationDirPath()+"/html/line.html"));
}
voidWidget::on_btnLinex_clicked()
{
ui->webView->load(QUrl("file:///"+qApp->applicationDirPath()+"/html/linex.html"));
}
voidWidget::on_btnLiney_clicked()
{
ui->webView->load(QUrl("file:///"+qApp->applicationDirPath()+"/html/liney.html"));
}
voidWidget::on_btnBar_clicked()
{
ui->webView->load(QUrl("file:///"+qApp->applicationDirPath()+"/html/bar.html"));
}
voidWidget::on_btnBarx_clicked()
{
ui->webView->load(QUrl("file:///"+qApp->applicationDirPath()+"/html/barx.html"));
}
voidWidget::on_btnBary_clicked()
{
ui->webView->load(QUrl("file:///"+qApp->applicationDirPath()+"/html/bary.html"));
}
voidWidget::on_btnScatter_clicked()
{
ui->webView->load(QUrl("file:///"+qApp->applicationDirPath()+"/html/scatter.html"));
}
voidWidget::on_btnK_clicked()
{
ui->webView->load(QUrl("file:///"+qApp->applicationDirPath()+"/html/k.html"));
}
voidWidget::on_btnPie_clicked()
{
ui->webView->load(QUrl("file:///"+qApp->applicationDirPath()+"/html/pie.html"));
}
voidWidget::on_btnRadar_clicked()
{
ui->webView->load(QUrl("file:///"+qApp->applicationDirPath()+"/html/radar.html"));
}
voidWidget::on_btnChord_clicked()
{
ui->webView->load(QUrl("file:///"+qApp->applicationDirPath()+"/html/chord.html"));
}
voidWidget::on_btnGauge_clicked()
{
ui->webView->load(QUrl("file:///"+qApp->applicationDirPath()+"/html/gauge.html"));
}
voidWidget::on_btnFunnel_clicked()
{
ui->webView->load(QUrl("file:///"+qApp->applicationDirPath()+"/html/funnel.html"));
}
voidWidget::on_btnData_clicked()
{
ui->webView->load(QUrl("file:///"+qApp->applicationDirPath()+"/html/data.html"));
}
代碼編譯通過後，将包含UI展示的Html目錄（含有html檔案和js檔案）拷到與生成的運作檔案相同的目錄下運作即可。這樣簡單的靜态圖表就可以完成了。如果要實作動态的圖形顯示則要實作Qwebkit與Html之間通信。下次我在用一個單獨的例子示範。
文中使用的例子的源碼請參看位址：http://download.csdn.net/detail/liuyez123/9370526