BarChart Example

The example shows how to create a bar chart.

Article lu fois.

L'auteur

The Qt Company Ltd.

L'article

Publié le 26 janvier 2024 - Mis à jour le 26 janvier 2024

Liens sociaux

BarChart Example▲

BarChart shows the data in sets as separate bars, which are in categories.

Running the Example▲

To run the example from Qt Creator, open the Welcome mode and select the example from Examples. For more information, visit Building and Running an Example.

Creating Bar Charts▲

The barsets are used in the same way in all barcharts. To illustrate the difference between various barcharts, we use the same data in the examples. Data that the barchart visualizes, is defined by the QBarSet instances. Here we create the sets and append data to them. The data is appended here with the << operator. Alternatively, the append method could be used.

Sélectionnez

    QBarSet *set0 = new QBarSet("Jane");
    QBarSet *set1 = new QBarSet("John");
    QBarSet *set2 = new QBarSet("Axel");
    QBarSet *set3 = new QBarSet("Mary");
    QBarSet *set4 = new QBarSet("Samantha");

    *set0 &lt;&lt; 1 &lt;&lt; 2 &lt;&lt; 3 &lt;&lt; 4 &lt;&lt; 5 &lt;&lt; 6;
    *set1 &lt;&lt; 5 &lt;&lt; 0 &lt;&lt; 0 &lt;&lt; 4 &lt;&lt; 0 &lt;&lt; 7;
    *set2 &lt;&lt; 3 &lt;&lt; 5 &lt;&lt; 8 &lt;&lt; 13 &lt;&lt; 8 &lt;&lt; 5;
    *set3 &lt;&lt; 5 &lt;&lt; 6 &lt;&lt; 7 &lt;&lt; 3 &lt;&lt; 4 &lt;&lt; 5;
    *set4 &lt;&lt; 9 &lt;&lt; 7 &lt;&lt; 5 &lt;&lt; 3 &lt;&lt; 1 &lt;&lt; 2;

We create the series and append the barsets to it. The series takes ownership of the barsets. The series groups the data from sets to categories. First values of each set are grouped together at first category second value to second category and so on.

Sélectionnez

    QBarSeries *series = new QBarSeries();
    series-&gt;append(set0);
    series-&gt;append(set1);
    series-&gt;append(set2);
    series-&gt;append(set3);
    series-&gt;append(set4);

Here we create the chart object and add the series to it. We set the title for chart with setTitle and then turn on animations of the series by calling setAnimationOptions(QChart::SeriesAnimations)

Sélectionnez

    QChart *chart = new QChart();
    chart-&gt;addSeries(series);
    chart-&gt;setTitle("Simple barchart example");
    chart-&gt;setAnimationOptions(QChart::SeriesAnimations);

To have categories displayed on axis, we need to create a QBarCategoryAxis for that. Here we create a category axis with a list of categories and set it to be aligned to the bottom, acting as the x-axis, and attach it to the series. The chart takes ownership of the axis. For y-axis we use a value axis, aligned to the left-hand side.

Sélectionnez

    QStringList categories;
    categories &lt;&lt; "Jan" &lt;&lt; "Feb" &lt;&lt; "Mar" &lt;&lt; "Apr" &lt;&lt; "May" &lt;&lt; "Jun";
    QBarCategoryAxis *axisX = new QBarCategoryAxis();
    axisX-&gt;append(categories);
    chart-&gt;addAxis(axisX, Qt::AlignBottom);
    series-&gt;attachAxis(axisX);

    QValueAxis *axisY = new QValueAxis();
    axisY-&gt;setRange(0,15);
    chart-&gt;addAxis(axisY, Qt::AlignLeft);
    series-&gt;attachAxis(axisY);

We also want to show the legend. To do that, we get the legend pointer from the chart and set it to visible. We also place the legend to the bottom of the chart by setting its alignment to Qt::AlignBottom.

Sélectionnez

    chart-&gt;legend()-&gt;setVisible(true);
    chart-&gt;legend()-&gt;setAlignment(Qt::AlignBottom);

Finally we add the chart onto a view. We also turn on the antialiasing for the chartView.

Sélectionnez

    QChartView *chartView = new QChartView(chart);
    chartView-&gt;setRenderHint(QPainter::Antialiasing);

The chart is ready to be shown. We set the chart to be central widget of the window. We also set the size for the chart window and show it.

Sélectionnez

    QMainWindow window;
    window.setCentralWidget(chartView);
    window.resize(420, 300);
    window.show();

Example project▲

Example project @ code.qt.io

Vous avez aimé ce tutoriel ? Alors partagez-le en cliquant sur les boutons suivants :