Question

我正在使用QT Charts在UI上绘制数据，我的绘图将是实时的， X和Y轴将依次增加，因为我需要链接{{1}到图表。由于scrollBar在ChartView中没有内置的scrollbar，我想知道如何在QML中执行此操作，以下是代码：

Flickable

我还发现ChartView有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 } } }，ScrollDown等函数，但我不知道如何将这些函数与scrollBar集成。
有没有使用ScrollRight在QML中绘制数据的替代方案？

请建议我使用QT 5.9.1。

Answer 1

A）ScrollView

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）ScrollBar

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 回答帮助我们扩展代码以使用template <class T> struct base { base(T ) { } }; template <class T> struct derived : base<T> { using base<T>::base; }; base b = 4; // ok derived d = 4; // error，以便我可以使用Flickable和scrollbar：

flick

可滚动的QML图表

2 个答案: