web-dev-qa-db-fra.com

Comment créer des graphiques en QML?

J'aimerais ajouter à ma demande une page contenant non seulement des chiffres bruts, mais également des graphiques conviviaux pour l'affichage de données.

Existe-t-il un composant natif ou un plug-in tiers que je pourrais utiliser pour créer de tels éléments dans QML?

Je recherche une solution open source qui, idéalement, fonctionnera non seulement sur Ubuntu-touch, mais également sur un ordinateur de bureau.

application-developmentubuntu-touchubuntu-sdkqml
6
Sylvain Pineau

Vous pouvez utiliser QChart.js - Liaisons QML pour Charts.js (une simple bibliothèque JavaScript de graphiques HTML5 utilisant l'élément canvas).

enter image description here

J'ai créé le projet ici pour prendre en charge les événements de redimensionnement (pour une utilisation sur le bureau). J'ai essentiellement besoin de réinitialiser le contexte de la zone de dessin pour permettre aux événements de redimensionnement de redessiner correctement la surface avec une taille de fenêtre mise à jour (voir http://qt-project.org/forums/viewthread/3731 )

Exemple QML:

enter image description here

L'extrait suivant crée la page du graphique à secteurs ci-dessus:

import QtQuick 2.0
import QtQuick.Layouts 1.1
import Ubuntu.Components 0.1
import "."
import "QChart.js" as Charts

MainView {
    id: root
    width: units.gu(50)
    height: units.gu(80)

    PageStack {
        id: pageStack
        Component.onCompleted: Push(page0)

        Page {
            id: page0
            title: i18n.tr("Test Results")

            ColumnLayout {
                spacing: units.gu(2)
                anchors.margins: units.gu(2);
                anchors.fill: parent

                Label {
                    fontSize: "x-large"
                    text: "Summary"
                }

                Chart {
                    id: chart_pie;
                    Layout.fillHeight: true
                    Layout.fillWidth: true
                    chartAnimated: true;
                    chartAnimationEasing: Easing.Linear;
                    chartAnimationDuration: 1000;
                    chartType: Charts.ChartType.PIE;
                    chartOptions: {"segmentStrokeColor": "#ECECEC"};
                    chartData: [
                        {value: 15, color: "#6AA84F"},
                        {value:  3, color: "#DC3912"},
                        {value:  5, color: "#FF9900"}];
                }

                Column {
                    id: legend
                    Row {
                        spacing: units.gu(1)
                        Text {
                            text: "█"
                            color:"#6AA84F"
                        }
                        Text {
                            text: "15 tests passed"
                        }
                    }
                    Row {
                        spacing: units.gu(1)
                        Text {
                            text: "█"
                            color:"#DC3912"
                        }
                        Text {
                            text: "3 tests failed"
                        }
                    }
                    Row {
                        spacing: units.gu(1)
                        Text {
                            text: "█"
                            color:"#FF9900"
                        }
                        Text {
                            text: "5 tests skipped"
                        }
                    }
                }

                Button {
                    id: button
                    Layout.fillWidth: true
                    color: "#009E0F";
                    text: "Save detailed report";
                    font.bold: true;
                    onClicked: {
                        button.color = "#009E0F"
                        chart_pie.repaint();
                    }
                }
            }
        }
    }
}
12
Sylvain Pineau