Qt 可滚动的QML图表

我正在使用

QT图表

在UI上绘制数据，我的绘图将是实时的，X轴和Y轴将依次增加，因为我需要将

滚动条

链接到图形。由于

ChartView

没有像

Flickable

那样内置的

scrollbar

，我想知道如何在QML中实现这一点，下面是代码：

import QtQuick 2.6
import QtQuick.Window 2.2
import QtCharts 2.0
import QtQuick.Controls 2.2

Window {
    visible: true
    width: 640
    height: 480
    title: qsTr("Hello World")

    ChartView {
        id:chartview
        width: 400
        height: 300
        antialiasing: true

        LineSeries {
            name: "LineSeries"
            axisX: valueAxis
            XYPoint { x: 0; y: 0.0 }
            XYPoint { x: 1.1; y: 3.2 }
            XYPoint { x: 1.9; y: 2.4 }
            XYPoint { x: 2.1; y: 2.1 }
            XYPoint { x: 2.9; y: 2.6 }
            XYPoint { x: 3.4; y: 2.3 }
            XYPoint { x: 200.1; y: 3.1 }
        }

        ValueAxis {
            id: valueAxis
            min: 0
            max: 20
            tickCount: 12
            labelFormat: "%.0f"

        }
    }

    ScrollBar{
        id:sBarHor
        visible:true
        width: chartview.width
        height:30
        anchors.top:chartview.bottom
        orientation: Qt.Horizontal


        contentItem: Rectangle {
            implicitHeight: 50
            color:"green"
        }

        background: Rectangle{
            color:"red"
        }

        onPositionChanged: {
            //How to move the chart
        }
    }        
}

我还发现图表视图中有

向下滚动

，

向右滚动

等功能，但我不知道如何将这些功能与滚动条集成

在不使用QT图表的情况下，是否有其他方法可以在QML中绘制数据

请建议我使用Qt5.9.1。

A）滚动视图

import QtQuick 2.6
import QtQuick.Window 2.2
import QtQuick.Controls 2.2
import QtCharts 2.0

Window {
    id: window
    width: 640
    height: 480
    visible: true

    ScrollView {
        id: scrollview
        anchors.fill: parent

        contentWidth: chartview.width
        contentHeight: chartview.height

        ChartView {
            id: chartview

            width: 1024
            height: 960

            LineSeries {
                name: "LineSeries"
                axisX: ValueAxis {
                    min: 0
                    max: 20
                    tickCount: 12
                    labelFormat: "%.0f"
                }
                XYPoint { x: 0; y: 0.0 }
                XYPoint { x: 1.1; y: 3.2 }
                XYPoint { x: 1.9; y: 2.4 }
                XYPoint { x: 2.1; y: 2.1 }
                XYPoint { x: 2.9; y: 2.6 }
                XYPoint { x: 3.4; y: 2.3 }
                XYPoint { x: 200.1; y: 3.1 }
            }
        }
    }
}

B） 滚动条

import QtQuick 2.6
import QtQuick.Window 2.2
import QtQuick.Controls 2.2
import QtCharts 2.0

Window {
    id: window
    width: 640
    height: 480
    visible: true

    ChartView {
        id: chartview

        x: -hbar.position * width
        width: parent.width * 2
        height: parent.height

        LineSeries {
            name: "LineSeries"
            axisX: ValueAxis {
                min: 0
                max: 20
                tickCount: 12
                labelFormat: "%.0f"
            }
            XYPoint { x: 0; y: 0.0 }
            XYPoint { x: 1.1; y: 3.2 }
            XYPoint { x: 1.9; y: 2.4 }
            XYPoint { x: 2.1; y: 2.1 }
            XYPoint { x: 2.9; y: 2.6 }
            XYPoint { x: 3.4; y: 2.3 }
            XYPoint { x: 200.1; y: 3.1 }
        }
    }

    ScrollBar {
        id: hbar
        hoverEnabled: true
        active: hovered || pressed
        orientation: Qt.Horizontal
        size: window.width / chartview.width
        anchors.left: parent.left
        anchors.right: parent.right
        anchors.bottom: parent.bottom
    }
}

A） 滚动视图

import QtQuick 2.6
import QtQuick.Window 2.2
import QtQuick.Controls 2.2
import QtCharts 2.0

Window {
    id: window
    width: 640
    height: 480
    visible: true

    ScrollView {
        id: scrollview
        anchors.fill: parent

        contentWidth: chartview.width
        contentHeight: chartview.height

        ChartView {
            id: chartview

            width: 1024
            height: 960

            LineSeries {
                name: "LineSeries"
                axisX: ValueAxis {
                    min: 0
                    max: 20
                    tickCount: 12
                    labelFormat: "%.0f"
                }
                XYPoint { x: 0; y: 0.0 }
                XYPoint { x: 1.1; y: 3.2 }
                XYPoint { x: 1.9; y: 2.4 }
                XYPoint { x: 2.1; y: 2.1 }
                XYPoint { x: 2.9; y: 2.6 }
                XYPoint { x: 3.4; y: 2.3 }
                XYPoint { x: 200.1; y: 3.1 }
            }
        }
    }
}

B） 滚动条

import QtQuick 2.6
import QtQuick.Window 2.2
import QtQuick.Controls 2.2
import QtCharts 2.0

Window {
    id: window
    width: 640
    height: 480
    visible: true

    ChartView {
        id: chartview

        x: -hbar.position * width
        width: parent.width * 2
        height: parent.height

        LineSeries {
            name: "LineSeries"
            axisX: ValueAxis {
                min: 0
                max: 20
                tickCount: 12
                labelFormat: "%.0f"
            }
            XYPoint { x: 0; y: 0.0 }
            XYPoint { x: 1.1; y: 3.2 }
            XYPoint { x: 1.9; y: 2.4 }
            XYPoint { x: 2.1; y: 2.1 }
            XYPoint { x: 2.9; y: 2.6 }
            XYPoint { x: 3.4; y: 2.3 }
            XYPoint { x: 200.1; y: 3.1 }
        }
    }

    ScrollBar {
        id: hbar
        hoverEnabled: true
        active: hovered || pressed
        orientation: Qt.Horizontal
        size: window.width / chartview.width
        anchors.left: parent.left
        anchors.right: parent.right
        anchors.bottom: parent.bottom
    }
}

---

@jpnurmi答案帮助我将代码扩展为使用

Flickable

，这样我就可以使用

scrollbar

和

flick

：

Window {
    id: window
    width: 640
    height: 480
    visible: true


    Flickable{
        id:flick
        width : parent.width
        height : 300
        contentHeight: chartview.height
        contentWidth:  chartview.width
        ChartView {
            id: chartview
            width: window.width * 2
            height: 300

            LineSeries {
                name: "LineSeries"
                axisX: ValueAxis {
                    min: 0
                    //max: 200
                    tickCount: 12
                    labelFormat: "%.0f"
                }
                XYPoint { x: 0; y: 0.0 }
                XYPoint { x: 1.1; y: 3.2 }
                XYPoint { x: 1.9; y: 2.4 }
                XYPoint { x: 2.1; y: 2.1 }
                XYPoint { x: 2.9; y: 2.6 }
                XYPoint { x: 3.4; y: 2.3 }
                XYPoint { x: 200.1; y: 3.1 }
            }
        }

        ScrollBar.horizontal: ScrollBar {
            id: hbar
            hoverEnabled: true
            active: hovered || pressed
            orientation: Qt.Horizontal
        }
    }
}

---

@jpnurmi答案帮助我将代码扩展为使用

Flickable

，这样我就可以使用

scrollbar

和

flick

：

Window {
    id: window
    width: 640
    height: 480
    visible: true


    Flickable{
        id:flick
        width : parent.width
        height : 300
        contentHeight: chartview.height
        contentWidth:  chartview.width
        ChartView {
            id: chartview
            width: window.width * 2
            height: 300

            LineSeries {
                name: "LineSeries"
                axisX: ValueAxis {
                    min: 0
                    //max: 200
                    tickCount: 12
                    labelFormat: "%.0f"
                }
                XYPoint { x: 0; y: 0.0 }
                XYPoint { x: 1.1; y: 3.2 }
                XYPoint { x: 1.9; y: 2.4 }
                XYPoint { x: 2.1; y: 2.1 }
                XYPoint { x: 2.9; y: 2.6 }
                XYPoint { x: 3.4; y: 2.3 }
                XYPoint { x: 200.1; y: 3.1 }
            }
        }

        ScrollBar.horizontal: ScrollBar {
            id: hbar
            hoverEnabled: true
            active: hovered || pressed
            orientation: Qt.Horizontal
        }
    }
}

---

谢谢你的建议。滚动条逻辑是我需要的。我扩展了您的想法，使用了

Flickable

，这样我也可以使用滚动条和flick。我在下面发布了相同的内容。如果X轴每1秒增长一次，有什么更好的方法？您能提出建议吗？如果您想使用Flickable，那么将滚动条附加到Flickable上就简单多了：谢谢您的建议。滚动条逻辑是我需要的。我扩展了您的想法，使用了

Flickable

，这样我也可以使用滚动条和flick。我在下面发布了相同的内容。如果X轴每1秒增长一次，有什么更好的方法？您能提出建议吗？如果您想使用Flickable，那么将滚动条附加到Flickable上要简单得多：