Multiple Axes Example

The example shows how to create a simple chart with two vertical axes. One for each series.

Article lu fois.

L'auteur

The Qt Company Ltd.

L'article

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

Liens sociaux

Multiple Axes Example▲

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.

Using Multiple Axes▲

Create the QChart instance, hide the legend of the chart, and set its title.

Sélectionnez

QChart *chart = new QChart();
chart-&gt;legend()-&gt;hide();
chart-&gt;setTitle("Multiaxis chart example");

Create a QValueAxis instance that will be used as a horizontal axis by both series and add it the bottom of the chart. The axis can be shared between many series, but each series can have only one vertical and horizontal axis.

Sélectionnez

QValueAxis *axisX = new QValueAxis;
axisX-&gt;setTickCount(10);
chart-&gt;addAxis(axisX, Qt::AlignBottom);

Create the first series, and add the data to it. Finally, add the series to the chart. Instantiate its own Y-axis, add it to the chart. Then attach both the common X-axis and the series specific Y-axis. In this example the color of the axis line is set to be the same as the color of the series to make it possible to distinguish which axis is attached to which series.

Sélectionnez

QSplineSeries *series = new QSplineSeries;
*series &lt;&lt; QPointF(1, 5) &lt;&lt; QPointF(3.5, 18) &lt;&lt; QPointF(4.8, 7.5) &lt;&lt; QPointF(10, 2.5);
chart-&gt;addSeries(series);

QValueAxis *axisY = new QValueAxis;
axisY-&gt;setLinePenColor(series-&gt;pen().color());

chart-&gt;addAxis(axisY, Qt::AlignLeft);
series-&gt;attachAxis(axisX);
series-&gt;attachAxis(axisY);

Similarly prepare another series. This time a different axis type is used. Additionally grid lines color is also set to be the same as the color of the series.

Sélectionnez

series = new QSplineSeries;
*series &lt;&lt; QPointF(1, 0.5) &lt;&lt; QPointF(1.5, 4.5) &lt;&lt; QPointF(2.4, 2.5) &lt;&lt; QPointF(4.3, 12.5)
        &lt;&lt; QPointF(5.2, 3.5) &lt;&lt; QPointF(7.4, 16.5) &lt;&lt; QPointF(8.3, 7.5) &lt;&lt; QPointF(10, 17);
chart-&gt;addSeries(series);

QCategoryAxis *axisY3 = new QCategoryAxis;
axisY3-&gt;append("Low", 5);
axisY3-&gt;append("Medium", 12);
axisY3-&gt;append("High", 17);
axisY3-&gt;setLinePenColor(series-&gt;pen().color());
axisY3-&gt;setGridLinePen((series-&gt;pen()));

chart-&gt;addAxis(axisY3, Qt::AlignRight);
series-&gt;attachAxis(axisX);
series-&gt;attachAxis(axisY3);

Create a QChartView object with QChart as a parameter. Enable Antialiasing to have the rendered splines look nicer.

Sélectionnez

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

The chart is ready to be shown.

Sélectionnez

QMainWindow window;
window.setCentralWidget(chartView);
window.resize(800, 600);
window.show();

Example project▲

Example project @ code.qt.io

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