# QMLQCustomPlot

**Repository Path**: BeiChen_XQ/QMLQCustomPlot

## Basic Information

- **Project Name**: QMLQCustomPlot
- **Description**: No description available
- **Primary Language**: C++
- **License**: GPL-3.0
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 1
- **Created**: 2024-12-02
- **Last Updated**: 2025-08-17

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README



## QtQuick开发需要C++基础和JS基础

 * 掌握必要的C++基础是学习和使用QtQuick框架的重要基石

## QCustomPlot能做什么

 * 可以在QWidget大放异彩,绘制各种图表和曲线

 * 也可以在QtQuick大展拳脚


## 基于QtQuick的QCustomPlot实现

  * 继承QQuickPaintedItem类 实现绘制

 
## 效果图

![kline](http://qtddui.b0.upaiyun.com/gitdir/blog/charts/kline.png)


![colormap](http://qtddui.b0.upaiyun.com/gitdir/blog/charts/colormap.png)

![barchart](http://qtddui.b0.upaiyun.com/gitdir/blog/charts/barchart.png)

![bar](http://qtddui.b0.upaiyun.com/gitdir/blog/charts/bar.png)
 
```
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"
  }

```