文章目錄

• • 前言
  • 效果圖
  • 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");//CustomColorMapqmlRegisterType<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.0ApplicationWindow {visible: truewidth: 640height: 480title: qsTr("QCustomPlot在QML中使用")SwipeView {id: swipeViewanchors.fill: parentcurrentIndex: tabBar.currentIndexinteractive: falseDDRubberband{}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: xmlModelsource: "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: tabBarcurrentIndex: swipeView.currentIndexTabButton {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應用程序上面

源文件下載

源碼下載鏈接源碼

總結

以上是生活随笔為你收集整理的基于QtQuick的QCustomPlot实现的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。