Chartview - 在 plotarea 中绘制矩形

问题描述

我目前正在开发一个 qml 应用程序，我需要在 plotArea 中指定各个区域。

我正在绘制矩形，但我的 scatterseries 点不可见，因为绘制在矩形的下方。 我尝试添加透明度，或在某处设置 z 值，但没有给出好的结果。 使用 qwidget qcharts 是可能的，我希望在 qml 中做同样的事情。

这是我的问题的工作代码示例（如果我评论矩形的部分，点是可见的）

import QtQuick 2.15
import QtCharts 2.3

ChartView {
id: test

width: 600
height: 400

animationOptions: ChartView.NoAnimation
theme: ChartView.ChartThemeDark
legend.visible: false

ValueAxis {
    id: axisX
    min: 0
    max: 100
}
ValueAxis {
    id: axisY1
    min: 0
    max: 100
}

Rectangle {
    id: rect1
    color: "red"
    border.width: 2
    width: plotArea.width * 4 / 10
    height: plotArea.height * 4/15
    x: plotArea.x
    y: plotArea.y
    Text {
        anchors.left: parent.left
        anchors.leftMargin: 8
        anchors.top: parent.top
        anchors.topMargin: 8
        text: qsTr("Rectangle 1")
    }
}

Rectangle {
    id: rect2
    color: "orange"
    border.width: 2
    width: plotArea.width * 6 / 10
    height: plotArea.height * 4 / 15
    x: rect1.x + rect1.width
    y: plotArea.y
    Text {
        anchors.left: parent.left
        anchors.leftMargin: 8
        anchors.top: parent.top
        anchors.topMargin: 8
        text: qsTr("Rectangle 2")
    }
}

Rectangle {
    id: rect3
    color: "orange"
    border.width: 2
    width: plotArea.width * 4 / 10
    height: plotArea.height * 7 / 15
    x: plotArea.x
    y: rect1.y + rect1.height
    Text {
        anchors.left: parent.left
        anchors.leftMargin: 8
        anchors.top: parent.top
        anchors.topMargin: 8
        text: qsTr("Rectangle 3")
    }
}

Rectangle {
    id: rect4
    color: "green"
    border.width: 2
    width: plotArea.width * 6 / 10
    height: plotArea.height * 7 / 15
    x: rect3.x + rect3.width
    y: rect3.y
    Text {
        anchors.left: parent.left
        anchors.leftMargin: 8
        anchors.top: parent.top
        anchors.topMargin: 8
        text: qsTr("Rectangle 4")
    }
}

Rectangle {
    id: rect5
    color: "gray"
    width: plotArea.width
    height: plotArea.height * 4 / 15
    x: plotArea.x
    y: rect3.y + rect3.height
    border.color: "black"
    border.width: 2
}

ScatterSeries {
    axisX: axisX
    axisY: axisY1
    color: "blue"
    XYPoint {
        x: 10
        y: 10
    }
    XYPoint {
        x: 98
        y: 5
    }
    XYPoint {
        x: 95
        y: 89
    }
    XYPoint {
        x: 5
        y: 75
    }
    markerShape: ScatterSeries.MarkerShapeRectangle
}
}

我没有在文档或网上找到解决方案。

我发现的封闭式问题是 Qml ChartView with sections for X Axis points 但他们没有答案

解决方法

我通过绘制 AreaSeries 找到了解决方案。

import QtQuick 2.15
import QtCharts 2.3


ChartView {
id: test

width: 600
height: 400

animationOptions: ChartView.SeriesAnimations
theme: ChartView.ChartThemeDark
legend.visible: false

ValueAxis {
    id: axisX
    min: 0
    max: 100
}
ValueAxis {
    id: axisY1
    min: 0
    max: 100
}

AreaSeries{
    axisX: axisX
    axisY: axisY1
    color: "red"
    upperSeries: LineSeries {
        XYPoint { x: 0; y: 50}
        XYPoint { x: 75; y: 50}
    }
    lowerSeries: LineSeries {
         XYPoint { x: 0; y: 0}
         XYPoint { x: 75; y: 0}
     }
}
AreaSeries{
    axisX: axisX
    axisY: axisY1
    color: "orange"
    upperSeries: LineSeries {
        XYPoint { x: 75; y: 50}
        XYPoint { x: 100; y: 50}
    }
    lowerSeries: LineSeries {
         XYPoint { x: 75; y: 0}
         XYPoint { x: 100; y: 0}
     }
}
AreaSeries{
    axisX: axisX
    axisY: axisY1
    color: "green"
    upperSeries: LineSeries {
        XYPoint { x: 0; y: 100}
        XYPoint { x: 100; y: 100}
    }
    lowerSeries: LineSeries {
         XYPoint { x: 0; y: 50}
         XYPoint { x: 100; y: 50}
     }
}

ScatterSeries {
    axisX: axisX
    axisY: axisY1
    color: "blue"
    XYPoint {
        x: 10
        y: 10

    }
    XYPoint {
        x: 98
        y: 5
    }
    XYPoint {
        x: 95
        y: 89
    }
    XYPoint {
        x: 5
        y: 75
    }
    markerShape: ScatterSeries.MarkerShapeRectangle
}

}