Creación de gráficos con temas

Aquí puede cambiar el aspecto de los diferentes temas incorporados para algunos de los tipos de gráficos soportados.

Creación de gráficos

Los gráficos de diferentes tipos se generan y añaden al diseño por separado. Por ejemplo, el gráfico de líneas se crea de la siguiente manera. La creación de otros tipos de gráficos es similar.

Primero se crea un gráfico.

auto chart = new QChart;
chart->setTitle("Line Chart");

Se genera un conjunto común de datos aleatorios y se coloca en una lista. Esta lista se utiliza en cada tipo de gráfico para añadir datos a las series del gráfico. Para las series de líneas, se crean instancias de QLineSeries y se añaden al gráfico.

QString name("Series ");
int nameIndex = 0;
for (const DataList &list : m_dataTable) {
    auto series = new QLineSeries(chart);
    for (const Data &data : list)
        series->append(data.first);
    series->setName(name + QString::number(nameIndex));
    nameIndex++;
    chart->addSeries(series);
}

Se crean ejes por defecto para las series de líneas. También especificamos rangos para los ejes basados en el rango de los datos utilizados para la serie.

chart->createDefaultAxes();
chart->axes(Qt::Horizontal).first()->setRange(0, m_valueMax);
chart->axes(Qt::Vertical).first()->setRange(0, m_valueCount);

También queremos añadir más espacio entre las etiquetas y los ejes y. Para ello especificamos un formato de etiqueta que añade caracteres de espacio a las etiquetas.

// Add space to label to add space between labels and axis
auto axisY = qobject_cast<QValueAxis *>(chart->axes(Qt::Vertical).first());
Q_ASSERT(axisY);
axisY->setLabelFormat("%.1f  ");

Por último, el gráfico de líneas se añade a la cuadrícula.

chartView = new QChartView(createLineChart(), this);
m_ui->gridLayout->addWidget(chartView, 1, 2);

Cambio de tema

El usuario puede seleccionar un tema incorporado para utilizarlo en el ejemplo. Este tema se aplica a todos los gráficos de la presentación.

auto theme = static_cast<QChart::ChartTheme>(
            m_ui->themeComboBox->itemData(m_ui->themeComboBox->currentIndex()).toInt());
    ...
chartView->chart()->setTheme(theme);

Cambio de animación, leyenda y antialiasing

En este ejemplo, también es posible ver cómo el cambio de animación, leyenda y antialiasing afecta a la apariencia del gráfico.

En función de la selección del usuario, se establece el tipo de animación utilizada en cada gráfico. Es posible no tener animaciones en el gráfico, o tener animaciones para los ejes de la rejilla o para las series, o para ambos.

QChart::AnimationOptions options(
            m_ui->animatedComboBox->itemData(m_ui->animatedComboBox->currentIndex()).toInt());
if (!m_charts.isEmpty() && m_charts.at(0)->chart()->animationOptions() != options) {
    for (QChartView *chartView : charts)
        chartView->chart()->setAnimationOptions(options);
}

El gráfico puede mostrarse con una leyenda. La leyenda puede alinearse a diferentes lados del gráfico.

Qt::Alignment alignment(
            m_ui->legendComboBox->itemData(m_ui->legendComboBox->currentIndex()).toInt());

if (!alignment) {
    for (QChartView *chartView : charts)
        chartView->chart()->legend()->hide();
} else {
    for (QChartView *chartView : charts) {
        chartView->chart()->legend()->setAlignment(alignment);
        chartView->chart()->legend()->show();
    }
}

El usuario también puede ver cómo la opción de antialiasing cambia la apariencia del gráfico. El antialiasing se actualiza en función de la selección del usuario.

bool checked = m_ui->antialiasCheckBox->isChecked();
for (QChartView *chart : charts)
    chart->setRenderHint(QPainter::Antialiasing, checked);