可滚动的 QML 图表

Posted 2023-02-16

【中文标题】可滚动的 QML 图表

【英文标题】：Scrollable QML Charts

【发布时间】：2017-10-23 09:52:21

【问题描述】：

我正在使用QT Charts 在 UI 上绘制数据，我的绘图将是实时的，并且 X 和 Y 轴 将依次增加，因为我需要将 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。

【参考方案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
    

【讨论】：

感谢您的出色建议。 ScrollBar 逻辑是我需要的。我将您的想法扩展为使用Flickable，这样我也可以使用滚动条和轻弹。我在下面发布了相同的内容。如果 X 轴每 1 秒增长一次，那么更好的方法是什么？你能推荐一下吗？

如果要使用 Flickable，那么将 ScrollBar 附加到 Flickable 上会简单很多：doc.qt.io/qt-5/…

【参考方案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