Charts QML:用于ChartView系列的自定义可拖动点委托

是否可以在Qt图表或其他第三方库中使用可拖动点的自定义委托（即，

项

s、图标、

矩形

s等），如在Qt位置可以方便地使用

MapItemView

、

MapQuickItem

及其

委托

属性？或者可以使用

路径视图

和

图表视图

的某些组合来实现此目的

PathView

inside

ChartView

可能是一个解决方案，但是可能需要将图表坐标转换为屏幕坐标：也不确定

ChartView

是否有相应的方法。需要做一些模型来检查这一点。未发现有关的任何文档或样本。应该是明显和简单的，就像它在Qt位置中实现一样，但是由于某些原因，它没有在Qt图表中实现

理想的方法可以是

Map

元素从Qt位置使用，在这里我有我所需要的一切：

MapItemView

，

MapQuickItem

和

MapPolygon

或

MapPolyline

用于图形，因为我有制图信息要绘制。但还有两个问题：

• 如何绘制轴：X-距离km，Y-高度
• 如何绘制图表网格
• 如何绘制模拟地形高程的自定义二维条形图（但是可以是

  MapPolygon

  ）

可以在这里动态绘制一些自定义地图吗？有什么想法吗

---

通过

ChartView

和

Repeater

内部和

ChartView

映射功能找到了简单而优雅的解决方案：

mapToPosition

和

mapToValue

轻松映射chartscreen坐标

模型：

import QtQuick 2.12
import QtCharts 2.3

Item {
    visible: true
    width: 640
    height: 480

    ChartView {
        id: chart
        anchors.fill: parent
        antialiasing: true

        ValueAxis {
            id: xAxis
            min: 0
            max: 1100
            tickCount: 12
            labelFormat: "%.0f"
        }

        ValueAxis {
            id: yAxis
            min: -50
            max: 200
            tickInterval: 50
            labelFormat: "%.0f"
        }

        ListModel {
            id: lineModel
            ListElement { x: 50; y: 155; }
            ListElement { x: 138; y: 175 }
            ListElement { x: 193; y: 50 }
            ListElement { x: 271; y: 90 }
            ListElement { x: 295; y: 90 }
            ListElement { x: 383; y: 150 }
            ListElement { x: 529; y: 100 }
            ListElement { x: 665; y: 150 }
            ListElement { x: 768; y: 90 }
            ListElement { x: 794; y: 90 }
            ListElement { x: 851; y: 50 }
            ListElement { x: 875; y: 50 }
            ListElement { x: 925; y: 175 }
            ListElement { x: 1060; y: 125 }
        }

        ListModel {
            id: areaModel
            ListElement { x: 0; y: 100 }
            ListElement { x: 138; y: 125 }
            ListElement { x: 193; y: 0 }
            ListElement { x: 271; y: 40 }
            ListElement { x: 295; y: 40 }
            ListElement { x: 383; y: 100 }
            ListElement { x: 529; y: 50 }
            ListElement { x: 665; y: 100 }
            ListElement { x: 768; y: 40 }
            ListElement { x: 794; y: 40 }
            ListElement { x: 851; y: 0 }
            ListElement { x: 875; y: 0 }
            ListElement { x: 925; y: 125 }
            ListElement { x: 1060; y: 75 }
            ListElement { x: 1100; y: 60 }
        }

        AreaSeries {
            name: "Terrain"
            axisX: xAxis
            axisY: yAxis
            borderColor: color
            upperSeries: LineSeries {
                id: areaSeries
            }
        }

        LineSeries {
            id: lineSeries
            name: "Flying path"
            axisX: xAxis
            axisY: yAxis
        }

        function adjustPosition(item, index) {
            let point = Qt.point(lineModel.get(index).x, lineModel.get(index).y)
            let position = chart.mapToPosition(point, lineSeries)
            item.x = position.x - item.width / 2
            item.y = position.y - item.height / 2
        }

        function adjustValue(item, index) {
            let position = Qt.point(item.x + item.width / 2, item.y + item.height / 2)
            let point = chart.mapToValue(position, lineSeries)
            lineModel.setProperty(index, "y", point.y)  // Change only Y-coordinate
            lineSeries.replace(lineSeries.at(index).x, lineSeries.at(index).y, // old
                               lineSeries.at(index).x, point.y)                // new
        }

        Repeater {
            model: lineModel

            Rectangle {
                id: indicator
                radius: 100
                width: radius / 2
                height: width
                color: "red"

                property real parentWidth: chart.width
                property real parentHeight: chart.height

                onParentWidthChanged: chart.adjustPosition(this, index)
                onParentHeightChanged: chart.adjustPosition(this, index)

                onYChanged: {
                    if(mouseArea.drag.active) {
                        chart.adjustValue(this, index)
                    }
                }

                Image {
                    id: waypoint
                    anchors.centerIn: parent
                    source: index ? "qrc:/waypoint.svg" : "qrc:/home.svg"
                }

                MouseArea {
                    id: mouseArea
                    anchors.fill: parent
                    drag.target: indicator
                    drag.axis: Drag.YAxis
                    preventStealing: true
                }
            }
        }

        Component.onCompleted: {
            lineSeries.clear()
            areaSeries.clear()
            for(let i = 0; i < lineModel.count; i++) {
                lineSeries.append(lineModel.get(i).x, lineModel.get(i).y)
            }

            for(let j = 0; j < areaModel.count; j++) {
                areaSeries.append(areaModel.get(j).x, areaModel.get(j).y)
            }
        }
    }
}

导入QtQuick 2.12
导入QT2.3图表
项目{
可见：正确
宽度：640
身高：480
海图{
id:图表
锚定。填充：父级
抗锯齿：真
ValueAxis{
id:xAxis
最低：0
最高：1100
计数：12
labelFormat:“%.0f”
}
ValueAxis{
id:yAxis
最低：-50
最多：200
间隔时间：50
labelFormat:“%.0f”
}
列表模型{
id:lineModel
列表元素{x:50；y:155；}
列表元素{x:138；y:175}
列表元素{x:193；y:50}
列表元素{x:271；y:90}
列表元素{x:295；y:90}
列表元素{x:383；y:150}
列表元素{x:529；y:100}
列表元素{x:665；y:150}
列表元素{x:768；y:90}
列表元素{x:794；y:90}
列表元素{x:851；y:50}
列表元素{x:875；y:50}
列表元素{x:925；y:175}
列表元素{x:1060；y:125}
}
列表模型{
id:areaModel
列表元素{x:0；y:100}
列表元素{x:138；y:125}
列表元素{x:193；y:0}
列表元素{x:271；y:40}
列表元素{x:295；y:40}
列表元素{x:383；y:100}
列表元素{x:529；y:50}
列表元素{x:665；y:100}
列表元素{x:768；y:40}
列表元素{x:794；y:40}
列表元素{x:851；y:0}
列表元素{x:875；y:0}
列表元素{x:925；y:125}
列表元素{x:1060；y:75}
列表元素{x:1100；y:60}
}
面积系列{
名称：“地形”
axisX:xAxis
axisY:yAxis
边框颜色：颜色
upperSeries:LineSeries{
id:areaSeries
}
}
系列{
编号：lineSeries
名称：“飞行路线”
axisX:xAxis
axisY:yAxis
}
功能调整位置（项目，索引）{
设point=Qt.point（lineModel.get（index）.x，lineModel.get（index）.y）
let position=图表。地图位置（点、线系列）
item.x=位置.x-item.width/2
item.y=位置.y-item.height/2
}
功能调整值（项目、索引）{
让位置=Qt.点（项目.x+item.width/2，项目.y+item.height/2）
let point=chart.mapToValue（位置、线系列）
lineModel.setProperty（索引，“y”，point.y）//仅更改y坐标
lineSeries.replace（lineSeries.at（index）.x，lineSeries.at（index）.y，//old
lineSeries.at（index.x，point.y）//新建
}
中继器{
型号：lineModel
长方形{
id：指示器
半径：100
宽度：半径/2
高度：宽度
颜色：“红色”
属性real PARENTWITH:chart.width
属性不动产高度：chart.height
onParentWidthChanged:chart.adjustPosition（此，索引）
onParentHeightChanged:chart.adjustPosition（此，索引）
更改后：{
如果（mouseArea.drag.active）{
图表.调整值（此，索引）
}
}
形象{
id：航路点
anchors.centerIn:父对象
来源：索引？“qrc:/waypoint.svg”：“qrc:/home.svg”
}
鼠耳{
id:mouseArea
锚定。填充：父级
drag.target：指示器
drag.axis:drag.YAxis
防止偷窃：真的
}
}
}
Component.onCompleted：{
lineSeries.clear（）
areaSeries.clear（）