it-swarm-es.com

¿Cómo crear gráficos en QML?

Me gustaría agregar a mi aplicación una página con no solo cifras en bruto, sino también gráficos amigables para la visualización de datos.

¿Existe un componente nativo o un complemento de terceros que pueda usar para crear dichos elementos en QML?

Estoy buscando una solución de código abierto que idealmente no solo funcione en ubuntu-touch sino también en un sistema de escritorio.

6
Sylvain Pineau

Puede usar QChart.js - Enlaces QML para Charts.js (una biblioteca javascript HTML5 Charts simple que usa el elemento canvas)

enter image description here

Bifurqué el proyecto aquí para admitir eventos de cambio de tamaño (para un uso de escritorio). Básicamente, necesito restablecer el contexto del lienzo para permitir que los eventos de cambio de tamaño redibujen correctamente la superficie con un tamaño de ventana actualizado (Ver http://qt-project.org/forums/viewthread/3731 )

Ejemplo de QML:

enter image description here

El siguiente fragmento crea la página de gráfico circular anterior:

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