Personnalisation des légendes

Remarque : ceci fait partie de l'exemple « Charts with QML Gallery ».

Nous vous montrons ici comment créer votre propre légende personnalisée au lieu d'utiliser la légende intégrée de l'API ChartView.

La vue principale de l'application affiche un graphique en aires empilées. Voici comment l'une de ces aires empilées est créée. Reportez-vous aux fichiers ChartViewStacked.qml et AnimatedAreaSeries.qml.

Capture d'écran présentant les impôts publics sous forme de plusieurs graphiques en aires superposés : le graphique orange correspond à la sécurité sociale, le vert aux impôts municipaux et le bleu aux impôts régionaux.

AnimatedAreaSeries {
    id: municipalSeries
    name: "municipal"
    axisX: axisX
    axisY: axisY
    borderWidth: 0
    upperSeries: LineSeries {
        id: municipalUpper
        XYPoint { x: 2006; y: 33119 + 13443 }
        XYPoint { x: 2007; y: 37941 + 15311 }
        XYPoint { x: 2008; y: 40122 + 16552 }
        XYPoint { x: 2009; y: 38991 + 17904 }
        XYPoint { x: 2010; y: 34055 + 17599 }
        XYPoint { x: 2011; y: 34555 + 19002 }
        XYPoint { x: 2012; y: 38991 + 19177 }
    }
    lowerSeries: stateUpper
}

En survolant la légende avec la souris, la série sur laquelle se trouve le curseur est mise en surbrillance (voir CustomLegend.qml).

Capture d'écran montrant que, lorsque le curseur de la souris passe au-dessus de l'une des trois légendes (État, municipal, sécurité sociale), la zone correspondante est mise en surbrillance

Row {
    id: legendRow
    anchors.centerIn: parent
    spacing: 10

    Repeater {
        id: legendRepeater
        model: legend.seriesCount
        delegate: legendDelegate
    }
}
Component {
    id: legendDelegate
    Rectangle {
        id: rect
    ...
        MouseArea {
            id: mouseArea
            anchors.fill: parent
            hoverEnabled: true
            onEntered: {
                rect.gradient = buttonGradientHovered;
                legend.entered(label.text);
            }
            onExited: {
                rect.gradient = buttonGradient;
                legend.exited(label.text);
                marker.opacity = 0.3;
                marker.height = 10;
            }
            onClicked: {
                legend.selected(label.text);
                marker.opacity = 1.0;
                marker.height = 12;
            }
        }

Vous pouvez également sélectionner l’une des zones empilées pour l’examiner de plus près sous forme de série linéaire d’un simple clic de souris (voir ChartViewHighlighted.qml).

Capture d'écran montrant que, si l'on appuie sur l'un des trois graphiques en aires, l'évolution de cette aire s'affiche

ChartView {
    id: chartViewHighlighted

    property variant selectedSeries

    signal clicked

    legend.visible: false
    margins.top: 10
    margins.bottom: 0
    antialiasing: true

    LineSeries {
        id: lineSeries

        axisX: ValueAxis {
            min: 2006
            max: 2012
            labelFormat: "%.0f"
            tickCount: 7
        }
        axisY: ValueAxis {
            id: axisY
            titleText: "EUR"
            min: 0
            max: 40000
            labelFormat: "%.0f"
            tickCount: 5
        }
    }

© 2026 The Qt Company Ltd. Documentation contributions included herein are the copyrights of their respective owners. The documentation provided herein is licensed under the terms of the GNU Free Documentation License version 1.3 as published by the Free Software Foundation. Qt and respective logos are trademarks of The Qt Company Ltd. in Finland and/or other countries worldwide. All other trademarks are property of their respective owners.