可滚动的 QML 图表

Question

我正在使用 QT Charts 在 UI 上绘制数据，我的绘图将是实时的并且 X 和 Y 轴 将按顺序增加我需要 link scrollBar 到图表。由于 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
        }
    }        
}

我还发现 ChartView 有 ScrollDown、ScrollRight 等函数，但我不知道如何将它们与滚动条集成。
有没有其他方法可以在不使用 QT Charts 的情况下在 QML 中绘制数据？

请建议我使用 QT 5.9.1。

Answer 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
    }
}

Answer 2

@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
        }
    }
}

可滚动的 QML 图表

Scrollable QML Charts

qt

qml

qtquick2

qtquickcontrols2

qtcharts