如何将矩形添加到 QML ChartView？

Question

我想放置一些矩形作为叠加层以在 ScatterSeries 的 ChartView 上显示感兴趣的区域。然而，当我尝试这样做时，它显然使用了与 ScatterSeries 不同的坐标系，因为它是在一个完全不同的地方绘制的。

例如，下面的示例旨在绘制一个包含所有 ScatterSeries 的矩形，但它只是在左上角绘制了一个小的绿色矩形，如屏幕截图所示。

        ChartView {
            id: view
            Layout.fillWidth : true
            Layout.fillHeight : true
            Rectangle {
                id: rec
                x: 30
                y: 50
                width: 40
                height: 10
                color: "green"
            }
            ScatterSeries{
                id: series
                XYPoint { x: 30; y: 50 }
                XYPoint { x: 50; y: 60 }
                XYPoint { x: 60; y: 50 }
                XYPoint { x: 70; y: 60 }
                axisX: ValueAxis {
                    min: 0
                    max: 100
                }
                axisY: ValueAxis {
                    min: 0
                    max: 100
                }
            }

文档建议矩形应该使用父 ChartView 的坐标系。我假设我实际上希望它使用 ChartView 场景的坐标系。我该怎么做？

Answer 1

要从 ScatterSeries 坐标系转换为像素坐标以在 ChartView 中放置一个 child 使用 mapToPosition(...):

function updateRectangle() {
    var topLeftPoint = view.mapToPosition(Qt.point(30,60), series)
    var bottomRightPoint = view.mapToPosition(Qt.point(70,50), series)

    rec.x = topLeftPoint.x
    rec.y = topLeftPoint.y

    rec.width  = bottomRightPoint.x - topLeftPoint.x
    rec.height = bottomRightPoint.y - topLeftPoint.y
}

其中 series 是您的 ScatterSeries，rec 是您的 Rectangle。

每当重新计算图表点时（例如，在创建和大小更改之后）调用更新函数。

另见相关问题

如何将矩形添加到 QML ChartView？

How to add a rectangle to a QML ChartView?

qt

qml

qchartview