Qt Charts Übersicht

Qt Charts ermöglicht die Erstellung stilvoller, interaktiver und datenzentrierter Benutzeroberflächen. „ Qt Charts “ nutzt das Graphics View Framework für eine einfache Integration. Die Diagrammkomponenten können als Objekte vom Typ „ QWidget “ oder „ QGraphicsWidget “ sowie als QML-Typen verwendet werden.

Die Klasse `QChart` verwaltet die grafische Darstellung verschiedener Arten von Reihen und anderer diagrammbezogener Objekte, wie z. B. Legenden und Achsen. `QChart` ist ein ` QGraphicsWidget `, das in einem ` QGraphicsScene` angezeigt werden kann. Eine einfachere Lösung besteht darin, ein Diagramm in einem Layout mithilfe der Komfortklasse `QChartView` anstelle von `QChart` darzustellen. In QML werden Diagramme mithilfe des Typs „ChartView“ dargestellt.

Einige Diagrammkomponenten können auch als Polardiagramme dargestellt werden, indem die Klasse `QPolarChart` – eine Spezialisierung der Klasse `QChart` – oder der QML-Typ `PolarChartView` – eine Spezialisierung des Typs `ChartView` – verwendet wird.

Das Erscheinungsbild von Diagrammen lässt sich durch die Verwendung von Designs, das Anpassen von Farben und Eigenschaften, das Ausblenden von Diagrammkomponenten oder das Animieren von Diagrammen anpassen.

Modell-Mapper ermöglichen die Verwendung eines von der Klasse „ QAbstractItemModel “ abgeleiteten Datenmodells als Datenquelle für ein Diagramm. Modell-Mapper können entweder horizontal oder vertikal ausgerichtet sein.

Diagrammtypen

Das Modul „ Qt Charts “ bietet die folgenden Diagrammtypen:

• Linien- und Spline-Diagramme
• Flächen- und Streudiagramme
• Balkendiagramme
• Kreisdiagramme
• Box-and-Whiskers-Diagramme
• Kerzendiagramme
• Polardiagramme

Jeder Diagrammtyp wird in QML durch eine von QAbstractSeries abgeleitete Klasse oder einen von AbstractSeries abgeleiteten Typ dargestellt. Diagramme werden erstellt, indem eine Instanz einer Serienklasse verwendet und dieser einer QChart- oder ChartView-Instanz hinzugefügt wird.

Beispiel:

QLineSeries* series = new QLineSeries();
series->add(0, 6);
series->add(2, 4);
...
chartView->chart()->addSeries(series);
chartView->chart()->createDefaultAxes();

Oder in QML:

ChartView {
    id: chart
    title: "Top-5 car brand shares in Finland"
    anchors.fill: parent
    legend.alignment: Qt.AlignBottom
    antialiasing: true

    property variant othersSlice: 0

    PieSeries {
        id: pieSeries
        PieSlice { label: "Volkswagen"; value: 13.5 }
        PieSlice { label: "Toyota"; value: 10.9 }
        PieSlice { label: "Ford"; value: 8.6 }
        PieSlice { label: "Skoda"; value: 8.2 }
        PieSlice { label: "Volvo"; value: 6.8 }
    }

    Component.onCompleted: {
        // You can also manipulate slices dynamically, like append a slice or set a slice exploded
        othersSlice = pieSeries.append("Others", 52.0);
        pieSeries.find("Volkswagen").exploded = true;
    }
}

import QtQuick

Sie können verschiedene Serienarten in einem Diagramm kombinieren.

Linien- und Spline-Diagramme

Linien- und Spline-Diagramme stellen Daten als eine Reihe von Datenpunkten dar, die durch Linien verbunden sind. In einem Liniendiagramm werden die Datenpunkte durch gerade Linien verbunden, während sie in einem Spline-Diagramm durch eine Spline verbunden sind. Die Spline wird mithilfe von ` QPainterPath` gezeichnet.

Ein Liniendiagramm wird mithilfe der Klasse `QLineSeries` oder des QML-Typs `LineSeries` implementiert.

Ein Spline-Diagramm wird mithilfe der Klasse `QSplineSeries`, die von `QLineSeries` erbt, oder des Typs `SplineSeries`, der von `LineSeries` erbt, implementiert.

Weitere Informationen finden Sie unter „Liniendiagramme erstellen “ und „Spline-Diagramme erstellen“. Ein Beispiel für die Kombination eines Liniendiagramms mit einem Balkendiagramm und die Verwendung einer gemeinsamen Achse für beide finden Sie unter „Linien- und Balkendiagramm kombinieren“.

Flächen- und Streudiagramme

Flächendiagramme stellen Daten als einen von zwei Linien begrenzten Bereich dar, während Streudiagramme Daten als eine Ansammlung von Punkten darstellen.

Ein Flächendiagramm wird mithilfe der Klasse `QAreaSeries` oder des QML-Typs `AreaSeries` implementiert. Standardmäßig wird die x-Achse als eine Begrenzung und `QLineSeries` oder `LineSeries` als die andere verwendet. Sie können jedoch `QLineSeries` oder `LineSeries` als beide Begrenzungen verwenden.

Ein Streudiagramm wird mithilfe der Klasse `QScatterSeries` oder des QML-Typs `ScatterSeries` implementiert.

Weitere Informationen finden Sie unter „Flächendiagramme erstellen “ und „Streudiagramme erstellen“.

Balkendiagramme

Ein Balkendiagramm stellt Daten als horizontale oder vertikale Balken dar, die nach Kategorien gruppiert sind. Die Klasse `QBarSet` und der QML-Typ `BarSet` repräsentieren einen Satz von Balken in einem Balkendiagramm. Die Klasse `QAbstractBarSeries` ist eine abstrakte Oberklasse für alle Balkenreihenklassen, und der Typ `AbstractBarSeries` ist der Obertyp der Balkenreihentypen. Der Reihen-Typ bestimmt, wie die Daten dargestellt werden.

Die Klasse `QBarSeries` und der QML-Typ `BarSeries` stellen Daten als vertikale Balken dar, die nach Kategorien gruppiert sind. In ähnlicher Weise stellen die Klasse `QHorizontalBarSeries` und der QML-Typ `HorizontalBarSeries` Daten als horizontale Balken dar.

Die Klasse `QStackedBarSeries` und der Typ `StackedBarSeries` stellen eine Datenreihe als vertikal gestapelte Balken dar, wobei jeder Balken einer Kategorie entspricht. Die entsprechenden horizontalen Klassen und Typen sind `QHorizontalStackedBarSeries` bzw. `HorizontalStackedBarSeries`.

Die Klasse „QPercentBarSeries“ und der QML-Typ „PercentBarSeries“ stellen eine Reihe kategorisierter Daten als prozentualen Anteil jeder Kategorie dar. Die entsprechenden horizontalen Klassen und Typen sind „QHorizontalPercentBarSeries“ bzw. „HorizontalPercentBarSeries“.

Weitere Informationen finden Sie unter „Balkendiagramme erstellen“, „Horizontale gestapelte Balkendiagramme erstellen“, „Horizontale Balkendiagramme erstellen“ und „Horizontale Prozentbalkendiagramme erstellen“.

Kreisdiagramme

Kreisdiagramme stellen Daten als Kreis dar, der aus Kreissegmenten besteht. Der Kreis wird mithilfe der Klasse „QPieSeries“ oder des QML-Typs „PieSeries“ implementiert, und die Kreissegmente werden mithilfe der Klasse „QPieSlice“ oder des QML-Typs „PieSlice“ hinzugefügt.

Das Kreisdiagramm kann in ein Ringdiagramm umgewandelt werden, indem eine Lochgröße zwischen 0,0 und 1,0 angegeben wird.

Weitere Informationen finden Sie unter „Diagramme mit Widgets – Galerie“, „Erstellen eines Donut-Aufschlüsselungsdiagramms“ und „Erstellen verschachtelter Donut-Diagramme“.

Box-and-Whiskers-Diagramme

Box-and-Whiskers-Diagramme stellen Daten als Quartile dar, die durch „Whiskers“ (Ausläufer) erweitert sind, welche die Variabilität der Werte zeigen. Die Elemente in Box-and-Whiskers-Reihen werden nach Kategorien gruppiert, ähnlich wie Balkensätze in Balkenreihen. Für jedes Element eines Box-and-Whiskers-Diagramms werden der untere Extremwert, das untere Quartil, der Median, das obere Quartil und der obere Extremwert angegeben.

Ein Box-and-Whiskers-Diagramm wird mithilfe der Klassen `QBoxPlotSeries` und `QBoxSet` oder der QML-Typen `BoxPlotSeries` und `BoxSet` implementiert.

Weitere Informationen finden Sie unter „Erstellen von Box-and-Whiskers-Diagrammen“.

Kerzendiagramme

Kerzendiagramme stellen eine Datenreihe dar, die als Kerzen dargestellt wird.

Ein Kerzendiagramm wird mithilfe der Klassen „QCandlestickSeries“ und „QCandlestickSet“ oder der QML-Typen „CandlestickSeries“ und „CandlestickSet“ implementiert.

Polardiagramme

Polardiagramme stellen Daten in einem kreisförmigen Diagramm dar, wobei die Anordnung der Daten vom Winkel und der Entfernung zum Mittelpunkt des Diagramms, dem Pol, abhängt.

Die Klasse `QPolarChart` ist eine Spezialisierung der Klasse `QChart`. Sie unterstützt Linien-, Spline-, Flächen- und Streudiagramm-Reihen sowie alle von diesen unterstützten Achsenarten. Die Achse kann entweder als Radial- oder als Winkelachse verwendet werden. In QML lautet der entsprechende Typ `PolarChartView`.

Weitere Informationen finden Sie unter „Erstellen von Polardiagrammen “ und „Verwenden von Polardiagrammen mit QML“.

Achsen

Qt Charts unterstützt die folgenden Achsenarten:

• Wertachse
• Kategorieachse
• Balkenkategorieachse
• Datums- und Zeitachse
• Logarithmische Werteachse

Eine Achse kann so eingerichtet werden, dass sie eine Linie mit Skalenmarkierungen, Gitterlinien und Schattierungen anzeigt. Die Werte auf der Achse werden an den Positionen der Skalenmarkierungen dargestellt. Alle Achsenarten sind Spezialisierungen der Klasse `QAbstractAxis` oder des QML-Typs `AbstractAxis`.

Eine Werteachse fügt der Achse eines Diagramms reelle Werte hinzu. Sie wird mithilfe der Klasse `QValueAxis` oder des QML-Typs `ValueAxis` implementiert.

Eine Kategorieachse wird mithilfe der Klasse `QCategoryAxis` oder des QML-Typs `CategoryAxis` implementiert. Sie verfügt über benannte Bereiche und einstellbare Bereichsbreiten.

Die Balkenkategorieachse ähnelt einer Kategorieachse, jedoch ist die Bereichsbreite für alle Bereiche gleich. Eine Balkenkategorieachse wird mithilfe der Klasse `QBarCategoryAxis` oder des QML-Typs `BarCategoryAxis` implementiert.

Eine Datums- und Zeitachse fügt der Achse eines Diagramms Datums- und Zeitangaben hinzu. Sie wird mithilfe der Klasse `QDateTimeAxis` oder des QML-Typs `DateTimeAxis` implementiert.

Eine logarithmische Achse fügt der Achse eines Diagramms eine logarithmische Skala hinzu. Eine logarithmische Skala ist eine nichtlineare Skala, die auf Größenordnungen basiert, sodass jede Markierung auf der Achse dem Produkt aus der vorherigen Markierung und einem bestimmten Wert entspricht. Eine logarithmische Achse wird mithilfe der Klasse `QLogValueAxis` oder des QML-Typs `LogValueAxis` implementiert.

Für ein Diagramm können mehrere Achsen definiert werden. Die Achsen können unterhalb, oberhalb, links oder rechts vom Diagramm platziert werden. Außerdem können die Achsen unterschiedlicher Typen sein. Die Mischung von Achstypen, die zu unterschiedlichen Definitionsbereichen führen würde, wird jedoch nicht unterstützt, wie beispielsweise die Angabe von `QValueAxis` und `QLogValueAxis` in derselben Ausrichtung.

Weitere Informationen finden Sie unter „Liniendiagramme mit Datums- und Zeitachsen“, „Verwendung logarithmischer Wertachsen“, „Verwendung mehrerer Achsen“ und „Verwendung von Achsen mit QML“.

Legende

Eine Legende ist ein grafisches Objekt, das die Legende eines Diagramms anzeigt. Legendenobjekte können weder erstellt noch gelöscht werden, aber sie können über die Klasse `QChart` oder den QML-Typ `ChartView` referenziert werden. Der Zustand der Legende wird von `QChart` oder `ChartView` aktualisiert, wenn sich die Reihen ändern.

Eine Legende kann unterhalb oder oberhalb des Diagramms sowie links oder rechts davon positioniert werden. Standardmäßig ist die Legende an die Diagrammansicht angeheftet, kann jedoch in ein separates Grafikobjekt ausgelagert werden, das frei verschoben werden kann.

Es ist möglich, entweder einzelne Markierungen aus der Legende oder die gesamte Legende auszublenden.

Legendenmarkierungen können mithilfe der Basisklasse `QLegendMarker` und der Unterklassen für jeden Serien-Typ angepasst werden: `QAreaLegendMarker`, `QBarLegendMarker`, `QBoxPlotLegendMarker`, `QCandlestickLegendMarker` und `QXYLegendMarker`.

In QML lassen sich Legendenmarkierungen durch das Erstellen benutzerdefinierter Legenden anpassen, wie im Beispiel „Anpassen von Legenden“ veranschaulicht.

Interaktion mit Diagrammen

Endbenutzer können mit Diagrammen interagieren, indem sie ihnen dynamisch Werte hinzufügen, in die Daten eintauchen, Diagramme vergrößern und verkleinern, in Diagrammen scrollen sowie auf Elemente in Diagrammen klicken oder mit der Maus darüberfahren.

Daten dynamisch zeichnen

Es ist möglich, Daten dynamisch zu Diagrammen hinzuzufügen und die Diagrammansicht automatisch scrollen zu lassen, um die neuen Daten anzuzeigen.

Weitere Informationen finden Sie unter „Erstellen von Spline-Diagrammen“.

Detailansicht der Daten

Drilldown-Effekte lassen sich beispielsweise in Balken- oder Kreisdiagrammen implementieren. Wenn Benutzer ein Element im Diagramm auswählen, wird eine detailliertere Ansicht des Elements angezeigt. Dies wird durch das Löschen der ersten Reihe und das Hinzufügen einer weiteren Reihe umgesetzt.

Weitere Informationen finden Sie unter „Drilldown implementieren“.

Zoomen und Scrollen

Benutzer können zum Zoomen und Scrollen die Tastatur verwenden. Mit den Pfeiltasten können sie in Diagrammen scrollen und mit den Plus- und Minus-Tasten die Ansicht vergrößern oder verkleinern. Darüber hinaus können „ QRubberBand “ verwendet werden, um den Bereich auszuwählen, der vergrößert werden soll.

Auf Touch-Geräten können Gesten zum Verschieben und Zoomen verwendet werden.

Weitere Informationen finden Sie unter Beispiel für eine Zoomlinie.

Klicken und Mauszeiger-Position

Sie können Slots mit Signalen verknüpfen, die ausgelöst werden, wenn Endbenutzer auf Elemente in Diagrammen klicken oder mit der Maus darüber fahren. Auf diese Weise können Sie den Diagrammen Elemente wie beispielsweise Callouts hinzufügen.

Weitere Informationen finden Sie unter „Ein Callout über einem Diagramm zeichnen“.

Themen

Ein Thema ist eine integrierte Sammlung von Einstellungen zum UI-Stil, die auf alle visuellen Elemente eines Diagramms angewendet werden, wie z. B. Farben, Stifte, Pinsel und Schriftarten von Reihen sowie Achsen, Titel und Legende.

Qt Charts Enthält die folgenden vordefinierten Designs:

• Das helle Design, das als Standarddesign dient
• Das „Cerulean Blue“-Design
• Dunkles Design
• Sandbraunes Design
• Blaues Design nach dem Natural Color System (NCS)
• Hochkontrast-Design
• Eisblaues Design
• Qt-Design

Die Designs lassen sich durch Ändern der Farben, Stifte, Pinsel und Schriftarten anpassen. Neue Designs können durch Bearbeiten des Quellcodes von „ Qt Charts “ hinzugefügt werden.

Weitere Informationen finden Sie unter „Diagramme mit Designvorlagen erstellen“.