CustomSeries QML Type

Der Typ CustomSeries ermöglicht die Darstellung angepasster Diagrammtypen. Mehr...

• Liste aller Mitglieder, einschließlich geerbter Mitglieder

Eigenschaften

• delegate : Component

Methoden

• void append()
• void append(var data)
• void clear()
• void insert(int index)
• void insert(int index, var data)
• real mapX(real x)
• real mapY(real y)
• void remove(int index)

Detaillierte Beschreibung

Verwenden Sie CustomSeries, um angepasste Diagramme zu erstellen. Stellen Sie es sich als ein Streudiagramm vor, mit dem Sie auf benutzerdefinierte Daten für jedes Element zugreifen können.

CustomSeries definiert einen Delegaten, der zum Rendern jedes dem Diagramm hinzugefügten Elements verwendet wird. Jedes Element enthält benutzerdefinierte Daten, die in einer QVariantMap gespeichert sind. Der Index des Elements im Diagramm wird auch automatisch zur Datenkarte hinzugefügt. Im QML-Kontext wird die Variantenkarte durch ein JavaScript-Objekt definiert. Die Serie übergibt diese Map an jedes Element, das auf der Grundlage des Delegaten erstellt wird. Der Delegat bestimmt, wie die Daten zu verwenden sind.

Um Daten den durch die Achsen von GraphsView definierten Renderkoordinaten zuzuordnen, verwenden Sie die Funktionen mapX und mapY.

Der folgende Code implementiert das abgebildete benutzerdefinierte Diagramm. In diesem Fall enthalten die benutzerdefinierten Daten zwei Werte: upper und lower. Diese werden dann im Delegaten definiert, um die Höhe und die y-Koordinate des Elements zu beeinflussen.

import QtQuick
import QtGraphs

Window {
    width: 640
    height: 480
    visible: true

    GraphsView {
        anchors.fill: parent

        axisX: BarCategoryAxis {
            categories: ["ABC", "DEF"]
        }

        axisY: ValueAxis {
            max: 8
            tickInterval: 1
        }

        CustomSeries {
            id: custom

            delegate: Rectangle {
                property var data
                gradient: Gradient {
                    GradientStop { position: 0.0; color: "lightsteelblue" }
                    GradientStop { position: 1.0; color: "blue" }
                }
                border.width: 1
                x: custom.mapX(data.index + 0.5) - width * 0.5
                y: custom.mapY((data.upper + data.lower) * 0.5) - height * 0.5
                width: Math.abs(custom.mapX(1) - custom.mapX(0)) * 0.5
                height: Math.abs(custom.mapY(data.upper) - custom.mapY(data.lower))
            }

            CustomSeriesData {
                data: ({
                    upper: 5,
                    lower: 1
                })
            }

            CustomSeriesData {
                data: ({
                    upper: 6,
                    lower: 4
                })
            }
        }
    }
}

Dokumentation der Eigenschaft

delegate : Component

Der Delegat wird verwendet, um Elemente in QML einzufügen, die den bereitgestellten benutzerdefinierten Daten entsprechen. Die Daten werden in der CustomSeries selbst definiert und den delegierten Elementen über die Eigenschaft "data" übergeben.

delegate: Rectangle {
        property var data
        Rectangle {
            color: "tan"
            border.color: "black"
            border.width: 4
            y: series.mapY(data.index + 1) - height / 2 + 1
            x: series.mapX(data.median) - width / 2
            height: 32
            width: Math.abs(series.mapX(data.upperQuartile) - series.mapX(data.lowerQuartile))
        }
    }
}

Dokumentation der Methode

void append()

Hängt ein leeres Datenelement an die Serie an.

void append(var data)

Hängt ein durch data definiertes Datenelement an die Serie an.

void clear()

Löschen Sie alle Datenelemente.

void insert(int index)

Hängt ein leeres Datenelement an die Reihe an der Position index an.

void insert(int index, var data)

Hängt ein durch data definiertes Datenelement an die Reihe an der Position index an.

real mapX(real x)

Liefert x Achsen-Raum-Koordinaten umgerechnet in den Render-Raum.

real mapY(real y)

Liefert y Achsen-Raum-Koordinaten umgerechnet in den Render-Raum.

void remove(int index)

Entfernen Sie ein Datenelement an der Position index.