Qt Charts Visión general

Qt Charts permite crear interfaces de usuario elegantes, interactivas y centradas en los datos. Qt Charts utiliza Graphics View Framework para facilitar la integración. Los componentes gráficos pueden utilizarse como objetos QWidget o QGraphicsWidget o como tipos QML.

La clase QChart gestiona la representación gráfica de diferentes tipos de series y otros objetos relacionados con los gráficos, como la leyenda y los ejes. QChart es un QGraphicsWidget que puede mostrarse en un QGraphicsScene. Una solución más sencilla es mostrar un gráfico en un diseño utilizando la clase de conveniencia QChartView en lugar de QChart. En QML, los gráficos se muestran utilizando la clase ChartView.

Algunos componentes de gráficos también pueden presentarse como gráficos polares utilizando la clase QPolarChart, que es una especialización de la clase QChart, o el tipo QML PolarChartView, que es una especialización del tipo ChartView.

El aspecto de los gráficos puede personalizarse utilizando temas, modificando los colores y las propiedades, ocultando los componentes del gráfico o animando los gráficos.

Los model mappers permiten utilizar un modelo de datos derivado de la clase QAbstractItemModel como fuente de datos para un gráfico. Los model mappers pueden ser horizontales o verticales.

Tipos de gráficos

El módulo Qt Charts ofrece los siguientes tipos de gráficos:

• Gráficos de líneas y splines
• Gráficos de área y de dispersión
• Gráficos de barras
• Gráficos circulares
• Gráficos de cajas y bigotes
• Gráficos de velas
• Gráficos polares

Cada tipo de gráfico está representado por una clase derivada QAbstractSeries o un tipo derivado AbstractSeries en QML. Los gráficos se crean utilizando una instancia de una clase de series y añadiéndola a una instancia de QChart o ChartView.

Por ejemplo:

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

O, en 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

Se pueden combinar diferentes tipos de series en un mismo gráfico.

Gráficos de líneas y splines

Los gráficos de líneas y splines presentan los datos como una serie de puntos de datos conectados por líneas. En un gráfico de líneas, los puntos de datos están conectados por líneas rectas, mientras que en un gráfico spline están conectados por una spline. La spline se dibuja utilizando QPainterPath.

Un gráfico de líneas se implementa utilizando la clase QLineSeries o el tipo QML LineSeries.

Un gráfico spline se implementa utilizando la clase QSplineSeries que hereda de QLineSeries o el tipo SplineSeries que hereda de LineSeries.

Para obtener más información, consulte Creación de gráficos de líneas y Creación de gráficos spline. Para ver un ejemplo de combinación de un gráfico de líneas con un gráfico de barras y el uso de un eje común para ambos, consulte Combinación de gráficos de líneas y de barras.

Gráficos de área y de dispersión

Los gráficos de área presentan los datos como un área delimitada por dos líneas, mientras que los gráficos de dispersión presentan los datos como una colección de puntos.

Un gráfico de área se implementa utilizando la clase QAreaSeries o el tipo QML AreaSeries. Por defecto, el eje x se utiliza como un límite y QLineSeries o LineSeries como el otro. Sin embargo, puede utilizar QLineSeries o LineSeries como ambos límites.

Un gráfico de dispersión se implementa utilizando la clase QScatterSeries o el tipo QML ScatterSeries.

Para obtener más información, consulte Creación de gráficos de área y Creación de gráficos de dispersión.

Gráficos de barras

Un gráfico de barras presenta los datos en forma de barras horizontales o verticales agrupadas por categorías. La clase QBarSet y el tipo QML BarSet representan un conjunto de barras en un gráfico de barras. La clase QAbstractBarSeries es una clase padre abstracta para todas las clases de series de barras, y el tipo AbstractBarSeries es el tipo padre de los tipos de series de barras. El tipo de serie determina cómo se presentan los datos.

La clase QBarSeries y el tipo QML BarSeries presentan los datos como barras verticales agrupadas por categoría. Del mismo modo, la clase QHorizontalBarSeries y el tipo QML HorizontalBarSeries presentan los datos como barras horizontales.

La clase QStackedBarSeries y el tipo StackedBarSeries presentan una serie de datos como barras apiladas verticalmente, con una barra por categoría. La clase y el tipo horizontales correspondientes son QHorizontalStackedBarSeries y HorizontalStackedBarSeries, respectivamente.

La clase QPercentBarSeries y el tipo QML PercentBarSeries presentan una serie de datos categorizados como porcentaje de cada categoría. La clase y el tipo horizontal correspondientes son QHorizontalPercentBarSeries y HorizontalPercentBarSeries, respectivamente.

Para obtener más información, consulte Creación de gráficos de barras, Creación de gráficos de barras horizontales apiladas, Creación de gráficos de barras horizontales y Creación de gráficos de barras horizontales porcentuales.

Gráficos circulares

Los gráficos circulares presentan los datos como una tarta formada por porciones. La tarta se implementa utilizando la clase QPieSeries o el tipo QML PieSeries y los trozos de tarta se añaden utilizando la clase QPieSlice o el tipo QML PieSlice.

La tarta puede convertirse en un donut especificando un tamaño de agujero entre 0,0 y 1,0.

Para obtener más información, consulte Galería de gráficos con widgets, Creación de un gráfico de desglose de rosquilla y Creación de gráficos de rosquilla anidados.

Gráficos de cajas y bigotes

Los gráficos de caja y bigotes presentan los datos como cuartiles ampliados con bigotes que muestran la variabilidad de los valores. Los elementos de las series de gráficos de caja se agrupan por categorías, de forma similar a los conjuntos de barras de las series de barras. Para cada elemento de los gráficos de caja y bigotes, se especifican el extremo inferior, el cuartil inferior, la mediana, el cuartil superior y el valor extremo superior.

Un gráfico de cajas y bigotes se implementa utilizando las clases QBoxPlotSeries y QBoxSet o los tipos QML BoxPlotSeries y BoxSet.

Para obtener más información, consulte Creación de gráficos de caja y bigotes.

Gráficos de velas

Los gráficos de velas presentan una serie de datos en forma de velas.

Un gráfico de velas se implementa utilizando las clases QCandlestickSeries y QCandlestickSet o los tipos QML CandlestickSeries y CandlestickSet.

Gráficos polares

Los gráficos polares presentan los datos en un gráfico circular, donde la colocación de los datos se basa en el ángulo y la distancia desde el centro del gráfico, el polo.

La clase QPolarChart es una especialización de la clase QChart. Soporta series de líneas, splines, áreas y dispersión, así como todos los tipos de ejes soportados por ellas. El eje puede utilizarse como eje radial o angular. En QML, el tipo correspondiente es PolarChartView.

Para más información, consulte Creación de gráficos polares y Uso de gráficos polares con QML.

Ejes

Qt Charts admite los siguientes tipos de ejes:

• Eje de valor
• Eje de categoría
• Eje de categoría de barra
• Eje fecha-hora
• Eje de valor logarítmico

Un eje puede configurarse para mostrar una línea con marcas de graduación, líneas de cuadrícula y sombras. Los valores del eje se dibujan en las posiciones de las marcas de graduación. Todos los tipos de ejes son especializaciones de la clase QAbstractAxis o del tipo QML AbstractAxis.

Un eje de valores añade valores reales al eje de un gráfico. Se implementa utilizando la clase QValueAxis o el tipo QML ValueAxis.

Un eje de categoría se implementa utilizando la clase QCategoryAxis o el tipo QML CategoryAxis. Tiene rangos con nombre y anchos de rango ajustables.

El eje de categoría de barra es similar a un eje de categoría, pero el ancho de rango es el mismo para todos los rangos. Un eje de categoría de barras se implementa utilizando la clase QBarCategoryAxis o el tipo QML BarCategoryAxis.

Un eje de fecha-hora añade fechas y horas al eje de un gráfico. Se implementa utilizando la clase QDateTimeAxis o el tipo QML DateTimeAxis.

Un eje logarítmico añade una escala logarítmica al eje de un gráfico. Una escala logarítmica es una escala no lineal que se basa en órdenes de magnitud, de modo que cada marca de graduación en el eje es la marca de graduación anterior multiplicada por un valor. Un eje logarítmico se implementa utilizando la clase QLogValueAxis o el tipo QML LogValueAxis.

Se pueden definir múltiples ejes para un gráfico. Los ejes pueden situarse abajo, arriba, a la izquierda o a la derecha del gráfico. Además, los ejes pueden ser de distintos tipos. Sin embargo, no se admite la mezcla de tipos de ejes que daría lugar a dominios diferentes, como especificar QValueAxis y QLogValueAxis en la misma orientación.

Para obtener más información, consulte Gráficos de líneas con ejes de fecha y hora, Uso de ejes de valores logarítmicos, Uso de ejes múltiples y Uso de ejes con QML.

Leyenda

Una leyenda es un objeto gráfico que muestra la leyenda de un gráfico. Los objetos de leyenda no se pueden crear ni eliminar, pero se puede hacer referencia a ellos mediante la clase QChart o el tipo QML ChartView. El estado de la leyenda se actualiza mediante QChart o ChartView cuando cambian las series.

Una leyenda puede situarse por debajo o por encima del gráfico, así como a la izquierda o a la derecha del mismo. Por defecto, la leyenda se adjunta a la vista del gráfico, pero puede separarse en un elemento gráfico independiente que puede moverse libremente.

Es posible ocultar marcadores individuales de la leyenda o toda la leyenda.

Los marcadores de leyenda pueden modificarse utilizando la clase base QLegendMarker y las subclases para cada tipo de serie: QAreaLegendMarker, QBarLegendMarker, QBoxPlotLegendMarker, QCandlestickLegendMarker, y QXYLegendMarker.

En QML, los marcadores de leyenda pueden modificarse creando leyendas personalizadas, como se ilustra en el ejemplo Personalizar leyendas.

Interacción con los gráficos

Los usuarios finales pueden interactuar con los gráficos añadiéndoles valores de forma dinámica, profundizando en los datos, ampliando o reduciendo los gráficos, desplazándose por ellos y haciendo clic en los elementos de los gráficos o pasando el ratón por encima de ellos.

Dibujar datos dinámicamente

Es posible añadir datos a los gráficos de forma dinámica y hacer que la vista del gráfico se desplace automáticamente para mostrar los nuevos datos.

Para obtener más información, consulte Creación de gráficos de splines.

Desglose de datos

Los efectos de desglose pueden aplicarse, por ejemplo, a los gráficos de barras o circulares. Cuando los usuarios seleccionan un elemento del gráfico, se muestra una vista más detallada del mismo. Esto se implementa borrando la primera serie y añadiendo otra.

Para más información, consulte Implementación del desglose.

Zoom y desplazamiento

Los usuarios pueden utilizar el teclado para hacer zoom y desplazarse. Pueden desplazarse por los gráficos utilizando las teclas de flecha y hacer zoom dentro o fuera de los gráficos utilizando las teclas más y menos. Además, se puede utilizar QRubberBand para seleccionar el área que se va a ampliar.

En los dispositivos táctiles, se pueden utilizar gestos para desplazarse y hacer zoom.

Para más información, consulte Ejemplo de línea de zoom.

Hacer clic y pasar el ratón

Puede conectar ranuras a señales emitidas cuando los usuarios finales hacen clic en elementos de los gráficos o pasan el ratón por encima de ellos. Esto le permite añadir elementos, como llamadas, a los gráficos.

Para obtener más información, consulte Dibujar una llamada sobre un gráfico.

Temas

Un tema es una colección integrada de ajustes relacionados con el estilo de la interfaz de usuario que se aplican a todos los elementos visuales de un gráfico, como colores, plumas, pinceles y fuentes de las series, así como ejes, título y leyenda.

Qt Charts viene con los siguientes temas predefinidos:

• Tema claro, que es el tema por defecto
• Tema azul cerúleo
• Tema oscuro
• Tema marrón arena
• Tema azul Sistema de color natural (NCS)
• Tema de alto contraste
• Tema azul hielo
• Tema Qt

Los temas pueden personalizarse cambiando los colores, las plumas, los pinceles y las fuentes. Pueden añadirse nuevos temas modificando el código fuente de Qt Charts.

Para más información, consulte la sección Creación de gráficos con temas.