QML图表计算X轴上两点之间的差异

Posted 2023-02-16

【中文标题】QML图表计算X轴上两点之间的差异

【英文标题】：QML Charts Calculate Difference between two points on X Axis

【发布时间】：2021-10-09 15:08:30

【问题描述】：

我有一个带有 DateTime X 轴的 qml 折线图，我需要测量类似于此图表的两点之间的时间差 (dx)

这是带有示例数据的图表代码

    ChartView 
    id:chart
    title: "Line"
    anchors.fill: parent
    antialiasing: true
   
    DateTimeAxis 
           id: axisX
           format: "hh:mm:ss,ms"
           tickCount: 10

       

       ValueAxis 
           id: axisY
           min: 0
           max: 10
       

    LineSeries 
        id:series1
        name: "LineSeries"
        axisX: axisX
        axisY: axisY
        pointsVisible: true
        XYPoint  x: Date.parse("2020-10-09 05:51:00:500"); y: 0 
        XYPoint  x: Date.parse("2020-10-09 05:51:00:600"); y: 2 
        XYPoint  x: Date.parse("2020-10-09 05:52:00:100"); y: 4 
        XYPoint  x: Date.parse("2020-10-09 05:53:00:20"); y: 5 
        XYPoint  x: Date.parse("2020-10-09 05:54:00:200"); y: 8 
        XYPoint  x: Date.parse("2020-10-09 05:55:00:100"); y: 7 
        XYPoint  x: Date.parse("2020-10-09 05:56:00:200"); y: 6 
        XYPoint  x: Date.parse("2020-10-09 05:57:00:400"); y: 2 

    

知道如何使用 QML 或 C++ 来实现吗？

【参考方案1】：

我大致是这样的。您应该更好地调整时差处理。

Window 
        width: 640
        height: 480
        visible: true
        title: qsTr("Hello World")
    
    
        property int rectangeXPosition: 0
        property int rectangleYPosition: 0
        property int rWidth: 0
        property int rHeight: 0
        property int minuteDiff: 0
    
    
        ChartView 
            id:chart
            title: "Line"
            anchors.fill: parent
            antialiasing: true
    
            Rectangle
            
                x: rectangeXPosition
                y: rectangleYPosition
                width: rWidth
                height: rHeight
                color: "red"
                opacity: 0.2
    
                Text 
                    anchors.left: parent.right
                    anchors.top: parent.top
                    text: minuteDiff + " minutes"
                
            
    
            MouseArea
            
                anchors.fill: parent
                onPositionChanged:
                
                    rWidth = mouse.x - rectangeXPosition
                    rHeight = mouse.y - rectangleYPosition
                    var currentPoint = chart.mapToValue(Qt.point(mouse.x, mouse.y), series1)
                    var startPoint = chart.mapToValue(Qt.point(rectangeXPosition,rectangleYPosition),series1)
                    var dateTimeDiff = new Date(currentPoint.x - startPoint.x)
                    minuteDiff = dateTimeDiff.getMinutes()
                
    
                onPressed:
                
                    var point = Qt.point(mouse.x, mouse.y);
                    rectangeXPosition = point.x
                    rectangleYPosition = point.y
                
    
                onReleased:
                
                    rectangeXPosition = 0
                    rectangleYPosition = 0
                    rWidth = 0
                    rHeight = 0
                
            
    
            DateTimeAxis 
                id: axisX
                format: "hh:mm:ss,ms"
                tickCount: 10
    
            
    
            ValueAxis 
                id: axisY
                min: 0
                max: 10
            
    
            LineSeries 
                id:series1
                name: "LineSeries"
                axisX: axisX
                axisY: axisY
                pointsVisible: true
                XYPoint  x: Date.parse("2020-10-09 05:51:00:500"); y: 0 
                XYPoint  x: Date.parse("2020-10-09 05:51:00:600"); y: 2 
                XYPoint  x: Date.parse("2020-10-09 05:52:00:100"); y: 4 
                XYPoint  x: Date.parse("2020-10-09 05:53:00:20"); y: 5 
                XYPoint  x: Date.parse("2020-10-09 05:54:00:200"); y: 8 
                XYPoint  x: Date.parse("2020-10-09 05:55:00:100"); y: 7 
                XYPoint  x: Date.parse("2020-10-09 05:56:00:200"); y: 6 
                XYPoint  x: Date.parse("2020-10-09 05:57:00:400"); y: 2 
    
            
    
        
    

【讨论】：

我试过了，但测量结果不准确。

准确是什么意思？您的数据点介于 2020-10-09 05:51:00:500 和 2020-10-09 05:57:00:400 之间。大约6分钟。我提供的 gif 在矩形的右上角显示了合理的测量时间差异。

以毫秒为单位计算差异时

也许您没有开始点击点的确切位置。日期被插值。如果您开始在 A 和 B 之间绘制矩形，则开始时间将是 A 和 B 之间的某个日期和时间。您可以将其四舍五入到最接近的值。