IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)

StackedBarChart Example

The example shows how to create a simple stacked bar chart.

Article lu   fois.

L'auteur

Liens sociaux

Viadeo Twitter Facebook Share on Google+   

StackedBarChart Example

The stacked bar chart shows the data in sets as bars stacked on top of each other. The stacking is done per category. The example shows how to create a simple stacked bar chart. Stacked bar chart shows the data in sets as bars that are stacked on top of each other. The stacking is done per category. Creating a stacked bar chart is just like creating a regular bar chart, except that for a stacked bar chart, we use the QStackedBarSeries API instead of QBarSeries.

Image non disponible

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 Stacked Bar Charts

The barsets are used in same way in all barcharts. To illustrate the difference between various barcharts, we use same data in all examples. Data, which 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 << 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. The first values of each set are grouped together in the first category, the second values in the second category etc.

 
Sélectionnez
    QStackedBarSeries *series = new QStackedBarSeries();
    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 the 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 stackedbarchart example");
    chart-&gt;setAnimationOptions(QChart::SeriesAnimations);

To have the categories displayed on an axis, we need to create a QBarCategoryAxis first. Here we create a category axis with a list of categories and add it to the chart aligned to bottom, acting as the x-axis. The chart takes ownership of the axis. For the 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();
    chart-&gt;addAxis(axisY, Qt::AlignLeft);
    series-&gt;attachAxis(axisY);

We also want to show the legend. To do so, 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 the 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

Vous avez aimé ce tutoriel ? Alors partagez-le en cliquant sur les boutons suivants : Viadeo Twitter Facebook Share on Google+