基于QtQuick的QCustomPlot实现 (QML 实现)

## QtQuick开发需要C++基础和JS基础 * 掌握必要的C++基础是学习和使用QtQuick框架的重要基石 ## QCustomPlot能做什么 * 可以在QWidget大放异彩,绘制各种图表和曲线 * 也可以在QtQuick大展拳脚 ## 基于QtQuick的QCustomPlot实现 * 继承QQuickPaintedItem类 实现绘制 ## 效果图     ``` class DDuiBasePlotItem : public QQuickPaintedItem { Q_OBJECT public: DDuiBasePlotItem( QQuickItem* parent = 0 ); virtual ~DDuiBasePlotItem(); void paint( QPainter* painter ); virtual void initCustomPlotUI(){} QCustomPlot *getPlot(); protected: virtual void hoverMoveEvent(QHoverEvent *event); virtual void mousePressEvent( QMouseEvent* event ); virtual void mouseReleaseEvent( QMouseEvent* event ); virtual void mouseMoveEvent( QMouseEvent* event ); virtual void mouseDoubleClickEvent( QMouseEvent* event ); virtual void wheelEvent( QWheelEvent *event ); void routeMouseEvents( QMouseEvent* event ); void routeWheelEvents( QWheelEvent* event ); public slots: void graphClicked( QCPAbstractPlottable* plottable ); void onCustomReplot(); void updateCustomPlotSize(); private: QCustomPlot* m_CustomPlot; }; ``` ``` /// /// \brief DDuiCTPWidget::connectQuoteServer /// 初始化 /// int main(int argc, char *argv[]) { QApplication a(argc, argv); qmlRegisterType<CustomPlotItem>("CustomPlot", 1, 0, "CustomPlotItem"); qmlRegisterType<CustomPlotBarItem>("CustomPlot", 1, 0, "CustomPlotBarItem"); qmlRegisterType<CustomKLine>("CustomPlot", 1, 0, "CustomKLine");//CustomColorMap qmlRegisterType<CustomColorMap>("CustomPlot", 1, 0, "CustomColorMap"); qmlRegisterType<CustomBarChart>("CustomPlot", 1, 0, "CustomBarChart"); QQmlApplicationEngine engine; engine.load(QUrl(QLatin1String("qrc:/main.qml"))); return a.exec(); } ``` QML方面实现 ``` import QtQuick 2.7 import QtQuick.Controls 2.0 import QtQuick.Layouts 1.0 import QtQuick.XmlListModel 2.0 ApplicationWindow { visible: true width: 640 height: 480 title: qsTr("QCustomPlot在QML中使用") SwipeView { id: swipeView anchors.fill: parent currentIndex: tabBar.currentIndex interactive: false DDRubberband{ } PlotView { } CustomPlotBar{ } CustomKLine{ } CustomColorMap{ } CustomBarCharts{} Page { Label { text: qsTr("This is implementation of http://www.qcustomplot.com/index.php/support/forum/172\n" + "Adding random data on 500 ms tick to plot") anchors.centerIn: parent } XmlListModel { id: xmlModel source: "qrc:/combox.xml" query: "/rss/item" XmlRole { name: "title"; query: "title/string()" } XmlRole { name: "pubDate"; query: "pubDate/string()" } } ComboBox { textRole: "title" model: xmlModel } } } footer: TabBar { id: tabBar currentIndex: swipeView.currentIndex TabButton { text: qsTr("RubberBand") } TabButton { text: qsTr("Plot") } TabButton { text: qsTr("Bar") } TabButton { text: qsTr("KLine") } TabButton { text: qsTr("ColorMap") } TabButton { text: qsTr("BarChart") } TabButton { text: qsTr("Info") } } } ``` ## 注意事项 * 需要QCustomPlot源码 * 需要自己继续基于例子进行开发自己需要的图表 ## 应用场景 * 方便QCustomPlot业务移植到QtQuick应用程序上面 ## 有问题反馈 在使用中有任何问题，欢迎反馈给我，可以用以下联系方式跟我交流 * 邮件(373955953#qq.com, 把#换成@) * QQ: 39559539234 * QQ群:312125701 * github: [@寒山-居士](https://github.com/toby20130333) ## 关于作者 ```javascript var duoduozhijiao = { nickName : "寒山-居士", site : "http://www.heilqt.com", blog : "http://blog.heilqt.com" } ```