HelloGraphs

HelloGraphs muestra cómo hacer un simple gráfico de barras y un gráfico de líneas en 2D.

Las siguientes secciones describen cómo crear un gráfico de barras utilizando BarSeries y un gráfico de líneas utilizando LineSeries.

Ejecutar el ejemplo

Para ejecutar el ejemplo desde Qt Creatorabra el modo Welcome y seleccione el ejemplo de Examples. Para más información, consulte Qt Creator: Tutorial: Construir y ejecutar.

Gráfico de Barras

El primer gráfico del ejemplo es un gráfico de barras. Su creación comienza con un componente GraphsView, configurando los ejes X axis, Y axis y theme. El eje X es un BarCategoryAxis con 3 categorías. Tanto la rejilla vertical como las líneas del eje están ocultas. El eje Y es un ValueAxis con un rango visible entre 20 y 100. Las marcas principales con etiquetas se mostrarán cada 10 valores utilizando tickInterval. Las marcas secundarias se mostrarán cada 1 valor utilizando subTickCount 9 , lo que significa que entre cada marca principal habrá 9 marcas secundarias. Por último, theme se añade a uno que es adecuado para fondos oscuros. Este tema ajusta la cuadrícula del fondo del gráfico, las líneas de los ejes y las etiquetas.

GraphsView {
    anchors.fill: parent
    anchors.margins: 16
    axisX: BarCategoryAxis {
        categories: [2024, 2025, 2026]
        gridVisible: false
        subGridVisible: false
    }
    axisY: ValueAxis {
        min: 20
        max: 100
        tickInterval: 10
        subTickCount: 9
    }
    theme: GraphsTheme {
        colorScheme: GraphsTheme.ColorScheme.Dark
        theme: GraphsTheme.Theme.QtGreen
    }
    ...

Para convertirlo en un gráfico de barras, se añade BarSeries.

BarSeries {
    ...

Luego se añaden los datos en BarSeries usando BarSet. Hay 3 barras con propiedades personalizadas definidas de color y borde. Estas propiedades anularán las posibles seriesColors definidas para el GraphsTheme.

BarSet {
    values: [82, 50, 75]
    borderWidth: 2
    color: "#373F26"
    borderColor: "#DBEB00"
}

Gráfico de líneas

El segundo gráfico del ejemplo es un gráfico de líneas. También comienza definiendo un elemento GraphsView. Se crea GraphsTheme para obtener una apariencia personalizada. GraphsTheme ofrece una amplia gama de posibilidades de personalización para la cuadrícula de fondo y el eje, que se aplican después de theme.

El GraphsView define axisX y axisY adecuados para este gráfico.

GraphsView {
    anchors.fill: parent
    anchors.margins: 16
    theme: GraphsTheme {
        readonly property color c1: "#DBEB00"
        readonly property color c2: "#373F26"
        readonly property color c3: Qt.lighter(c2, 1.5)
        colorScheme: GraphsTheme.ColorScheme.Dark
        seriesColors: ["#2CDE85", "#DBEB00"]
        grid.mainColor: c3
        grid.subColor: c2
        axisX.mainColor: c3
        axisY.mainColor: c3
        axisX.subColor: c2
        axisY.subColor: c2
        axisX.labelTextColor: c1
        axisY.labelTextColor: c1
    }
    axisX: ValueAxis {
        max: 5
        tickInterval: 1
        subTickCount: 9
        labelDecimals: 1
    }
    axisY: ValueAxis {
        max: 10
        tickInterval: 1
        subTickCount: 4
        labelDecimals: 1
    }
    ...

El componente personalizado Delegate se utiliza para visualizar los puntos de datos.

component Marker : Rectangle {
    width: 16
    height: 16
    color: "#ffffff"
    radius: width * 0.5
    border.width: 4
    border.color: "#000000"
}

Para hacer de este un gráfico lineal, añada un LineSeries. Esto establece el pointDelegate para utilizar el componente personalizado Delegate que se creó anteriormente. Los puntos de datos se añaden utilizando elementos XYPoint.

LineSeries {
    id: lineSeries1
    width: 4
    pointDelegate: Marker { }
    XYPoint { x: 0; y: 0 }
    XYPoint { x: 1; y: 2.1 }
    XYPoint { x: 2; y: 3.3 }
    XYPoint { x: 3; y: 2.1 }
    XYPoint { x: 4; y: 4.9 }
    XYPoint { x: 5; y: 3.0 }
}

La segunda serie de líneas es similar a la primera. Como este es el segundo LineSeries dentro del GraphsView, el segundo color del seriesColors se escoge automáticamente.

LineSeries {
    id: lineSeries2
    width: 4
    pointDelegate: Marker { }
    XYPoint { x: 0; y: 5.0 }
    XYPoint { x: 1; y: 3.3 }
    XYPoint { x: 2; y: 7.1 }
    XYPoint { x: 3; y: 7.5 }
    XYPoint { x: 4; y: 6.1 }
    XYPoint { x: 5; y: 3.2 }
}

Proyecto de ejemplo @ code.qt.io