<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!-- qtcharts-overview.qdoc -->
<title>Qt Charts Overview | Qt Charts 5.9</title>
<link rel="stylesheet" type="text/css" href="style/offline-simple.css" />
<script type="text/javascript">
document.getElementsByTagName("link").item(0).setAttribute("href", "style/offline.css");
// loading style sheet breaks anchors that were jumped to before
// so force jumping to anchor again
setTimeout(function() {
var anchor = location.hash;
// need to jump to different anchor first (e.g. none)
location.hash = "#";
setTimeout(function() {
location.hash = anchor;
}, 0);
}, 0);
</script>
</head>
<body>
<div class="header" id="qtdocheader">
<div class="main">
<div class="main-rounded">
<div class="navigationbar">
<table><tr>
<td >Qt 5.9</td><td ><a href="qtcharts-index.html">Qt Charts</a></td><td >Qt Charts Overview</td></tr></table><table class="buildversion"><tr>
<td id="buildversion" width="100%" align="right">Qt 5.9.4 Reference Documentation</td>
</tr></table>
</div>
</div>
<div class="content">
<div class="line">
<div class="content mainContent">
<div class="sidebar">
<div class="toc">
<h3><a name="toc">Contents</a></h3>
<ul>
<li class="level1"><a href="#chart-types">Chart Types</a></li>
<li class="level2"><a href="#line-and-spline-charts">Line and Spline Charts</a></li>
<li class="level2"><a href="#area-and-scatter-charts">Area and Scatter Charts</a></li>
<li class="level2"><a href="#bar-charts">Bar Charts</a></li>
<li class="level2"><a href="#pie-charts">Pie Charts</a></li>
<li class="level2"><a href="#box-and-whiskers-charts">Box-and-Whiskers Charts</a></li>
<li class="level2"><a href="#candlestick-charts">Candlestick Charts</a></li>
<li class="level2"><a href="#polar-charts">Polar Charts</a></li>
<li class="level1"><a href="#axes">Axes</a></li>
<li class="level1"><a href="#legend">Legend</a></li>
<li class="level1"><a href="#interacting-with-charts">Interacting with Charts</a></li>
<li class="level2"><a href="#drawing-data-dynamically">Drawing Data Dynamically</a></li>
<li class="level2"><a href="#drilling-down-into-data">Drilling Down into Data</a></li>
<li class="level2"><a href="#zooming-and-scrolling">Zooming and Scrolling</a></li>
<li class="level2"><a href="#clicking-and-hovering">Clicking and Hovering</a></li>
<li class="level1"><a href="#themes">Themes</a></li>
</ul>
</div>
<div class="sidebar-content" id="sidebar-content"></div></div>
<h1 class="title">Qt Charts Overview</h1>
<span class="subtitle"></span>
<!-- $$$qtcharts-overview.html-description -->
<div class="descr"> <a name="details"></a>
<p>Qt Charts enables creating stylish, interactive, data centric user interfaces. Qt Charts uses the Graphics View Framework for ease of integration. The chart components can be used as QWidget or QGraphicsWidget objects or QML types.</p>
<p class="centerAlign"><img src="images/examples_chartthemes_light.png" alt="" /></p><p>The <a href="qchart.html">QChart</a> class manages the graphical representation of different types of series and other chart related objects, such as legend and axes. <a href="qchart.html">QChart</a> is a QGraphicsWidget that can be shown in a QGraphicsScene. A simpler solution is to display a chart in a layout by using the convenience class <a href="qchartview.html">QChartView</a> instead of <a href="qchart.html">QChart</a>. In QML, charts are displayed using the <a href="qml-qtcharts-chartview.html">ChartView</a> type.</p>
<p>Some chart components can also be presented as polar charts by using the the <a href="qpolarchart.html">QPolarChart</a> class that is a specialization of the <a href="qchart.html">QChart</a> class or the <a href="qml-qtcharts-polarchartview.html">PolarChartView</a> QML type that is a specialization of the <a href="qml-qtcharts-chartview.html">ChartView</a> type.</p>
<p>The look and feel of charts can be customized by using themes, modifying colors and properties, hiding chart components, or animating charts.</p>
<p>Model mappers enable using a data model derived from the QAbstractItemModel class as a data source for a chart. Model mappers can be either horizontal or vertical.</p>
<a name="chart-types"></a>
<h2 id="chart-types">Chart Types</h2>
<p>The Qt Charts module provides the following chart types:</p>
<ul>
<li><a href="qtcharts-overview.html#line-and-spline-charts">Line and spline charts</a></li>
<li><a href="qtcharts-overview.html#area-and-scatter-charts">Area and scatter charts</a></li>
<li><a href="qtcharts-overview.html#bar-charts">Bar charts</a></li>
<li><a href="qtcharts-overview.html#pie-charts">Pie charts</a></li>
<li><a href="qtcharts-overview.html#box-and-whiskers-charts">Box-and-whiskers charts</a></li>
<li><a href="qtcharts-overview.html#candlestick-charts">Candlestick charts</a></li>
<li><a href="qtcharts-overview.html#polar-charts">Polar charts</a></li>
</ul>
<p>Each chart type is represented by an <a href="qabstractseries.html">QAbstractSeries</a> derived class or <a href="qml-qtcharts-abstractseries.html">AbstractSeries</a> derived type in QML. Charts are created by using an instance of a series class and adding it to a <a href="qchart.html">QChart</a> or <a href="qml-qtcharts-chartview.html">ChartView</a> instance.</p>
<p>For example:</p>
<pre class="cpp">
<span class="type"><a href="qlineseries.html">QLineSeries</a></span><span class="operator">*</span> series <span class="operator">=</span> <span class="keyword">new</span> <span class="type"><a href="qlineseries.html">QLineSeries</a></span>();
series<span class="operator">-</span><span class="operator">></span>add(<span class="number">0</span><span class="operator">,</span> <span class="number">6</span>);
series<span class="operator">-</span><span class="operator">></span>add(<span class="number">2</span><span class="operator">,</span> <span class="number">4</span>);
<span class="operator">.</span><span class="operator">.</span><span class="operator">.</span>
chartView<span class="operator">-</span><span class="operator">></span>chart()<span class="operator">-</span><span class="operator">></span>addSeries(series);
chartView<span class="operator">-</span><span class="operator">></span>chart()<span class="operator">-</span><span class="operator">></span>createDefaultAxes();
</pre>
<p>Or, in QML:</p>
<pre class="qml">
import QtQuick 2.0
import QtCharts 2.0
<span class="type"><a href="qml-qtcharts-chartview.html">ChartView</a></span> {
<span class="name">width</span>: <span class="number">400</span>
<span class="name">height</span>: <span class="number">300</span>
<span class="name">theme</span>: <span class="name">ChartView</span>.<span class="name">ChartThemeBrownSand</span>
<span class="name">antialiasing</span>: <span class="number">true</span>
<span class="type"><a href="qml-qtcharts-pieseries.html">PieSeries</a></span> {
<span class="name">id</span>: <span class="name">pieSeries</span>
<span class="type"><a href="qml-qtcharts-pieslice.html">PieSlice</a></span> { <span class="name">label</span>: <span class="string">"eaten"</span>; <span class="name">value</span>: <span class="number">94.9</span> }
<span class="type"><a href="qml-qtcharts-pieslice.html">PieSlice</a></span> { <span class="name">label</span>: <span class="string">"not yet eaten"</span>; <span class="name">value</span>: <span class="number">5.1</span> }
}
}
</pre>
<p>You can combine different types of series in one chart.</p>
<a name="line-and-spline-charts"></a>
<h3 >Line and Spline Charts</h3>
<p>Line and spline charts present data as a series of data points connected by lines. In a line chart, the data points are connected by straight lines, whereas in a spline chart they are connected by a spline. The spline is drawn by using QPainterPath.</p>
<p><img src="images/examples_linechart.png" alt="" /> <img src="images/examples_splinechart.png" alt="" /></p>
<p>A line chart is implemented by using the <a href="qlineseries.html">QLineSeries</a> class or the <a href="qml-qtcharts-lineseries.html">LineSeries</a> QML type.</p>
<p>A spline chart is implemented by using the <a href="qsplineseries.html">QSplineSeries</a> class that inherits <a href="qlineseries.html">QLineSeries</a> or the <a href="qml-qtcharts-splineseries.html">SplineSeries</a> type that inherits <a href="qml-qtcharts-lineseries.html">LineSeries</a>.</p>
<p>For more information, see <a href="qtcharts-linechart-example.html">LineChart Example</a>, <a href="qtcharts-splinechart-example.html">SplineChart Example</a>, and <a href="qtcharts-dynamicspline-example.html">Dynamic Spline Example</a>. For an example of combining a line chart with a bar chart and using a common axis for both, see <a href="qtcharts-lineandbar-example.html">Line and BarChart Example</a>.</p>
<a name="area-and-scatter-charts"></a>
<h3 >Area and Scatter Charts</h3>
<p>Area charts present data as an area bound by two lines, whereas scatter charts present data as a collection of points.</p>
<p><img src="images/examples_areachart.png" alt="" /> <img src="images/examples_scatterchart.png" alt="" /></p>
<p>An area chart is implemented by using the <a href="qareaseries.html">QAreaSeries</a> class or the <a href="qml-qtcharts-areaseries.html">AreaSeries</a> QML type. By default, the x-axis is used as one boundary and <a href="qlineseries.html">QLineSeries</a> or <a href="qml-qtcharts-lineseries.html">LineSeries</a> as the other. However, you can use <a href="qlineseries.html">QLineSeries</a> or <a href="qml-qtcharts-lineseries.html">LineSeries</a> as both boundaries.</p>
<p>A scatter chart is implemented by using the <a href="qscatterseries.html">QScatterSeries</a> class or the <a href="qml-qtcharts-scatterseries.html">ScatterSeries</a> QML type.</p>
<p>For more information, see <a href="qtcharts-areachart-example.html">AreaChart Example</a>, <a href="qtcharts-scatterchart-example.html">ScatterChart Example</a>, and <a href="qtcharts-scatterinteractions-example.html">Scatter Interactions Example</a>.</p>
<a name="bar-charts"></a>
<h3 >Bar Charts</h3>
<p>A bar chart presents data as horizontal or vertical bars that are grouped by category. The <a href="qbarset.html">QBarSet</a> class and the <a href="qml-qtcharts-barset.html">BarSet</a> QML type represent one set of bars in a bar chart. The <a href="qabstractbarseries.html">QAbstractBarSeries</a> class is an abstract parent class for all bar series classes, and the <a href="qml-qtcharts-abstractbarseries.html">AbstractBarSeries</a> type is the parent type of bar series types. The series type determines how the data is presented.</p>
<p>The <a href="qbarseries.html">QBarSeries</a> class and the <a href="qml-qtcharts-barseries.html">BarSeries</a> QML type present data as vertical bars grouped by category. Similarly, the <a href="qhorizontalbarseries.html">QHorizontalBarSeries</a> class and the <a href="qml-qtcharts-horizontalbarseries.html">HorizontalBarSeries</a> QML type present data as horizontal bars.</p>
<p><img src="images/examples_barchart.png" alt="" /> <img src="images/examples_horizontalbarchart.png" alt="" /></p>
<p>The <a href="qstackedbarseries.html">QStackedBarSeries</a> class and the <a href="qml-qtcharts-stackedbarseries.html">StackedBarSeries</a> type present a series of data as vertically stacked bars, with one bar per category. The corresponding horizontal class and type are <a href="qhorizontalstackedbarseries.html">QHorizontalStackedBarSeries</a> and <a href="qml-qtcharts-horizontalstackedbarseries.html">HorizontalStackedBarSeries</a>, respectively.</p>
<p><img src="images/examples_stackedbarchart.png" alt="" /> <img src="images/examples_horizontalstackedbarchart.png" alt="" /></p>
<p>The <a href="qpercentbarseries.html">QPercentBarSeries</a> class and <a href="qml-qtcharts-percentbarseries.html">PercentBarSeries</a> QML type present a series of categorized data as a percentage of each category. The corresponding horizontal class and type are <a href="qhorizontalpercentbarseries.html">QHorizontalPercentBarSeries</a> and <a href="qml-qtcharts-horizontalpercentbarseries.html">HorizontalPercentBarSeries</a>, respectively.</p>
<p><img src="images/examples_percentbarchart.png" alt="" /> <img src="images/examples_horizontalpercentbarchart.png" alt="" /></p>
<p>For more information, see <a href="qtcharts-barchart-example.html">BarChart Example</a>, <a href="qtcharts-horizontalbarchart-example.html">HorizontalBarChart Example</a>, <a href="qtcharts-stackedbarchart-example.html">StackedBarChart Example</a>, <a href="qtcharts-horizontalstackedbarchart-example.html">HorizontalStackedBarChart Example</a>, <a href="qtcharts-percentbarchart-example.html">PercentBarChart Example</a>, and <a href="qtcharts-horizontalpercentbarchart-example.html">HorizontalPercentBarChart Example</a>.</p>
<a name="pie-charts"></a>
<h3 >Pie Charts</h3>
<p>Pie charts present data as a pie that consists of pie slices. The pie is implemented using the <a href="qpieseries.html">QPieSeries</a> class or the <a href="qml-qtcharts-pieseries.html">PieSeries</a> QML type and the pie slices are added using the <a href="qpieslice.html">QPieSlice</a> class or the <a href="qml-qtcharts-pieslice.html">PieSlice</a> QML type.</p>
<p>The pie can be turned into a donut by specifying a hole size between 0.0 and 1.0.</p>
<p><img src="images/examples_piechart.png" alt="" /> <img src="images/examples_donutchart.png" alt="" /></p>
<p>For more information, see <a href="qtcharts-piechart-example.html">PieChart Example</a>, <a href="qtcharts-piechartcustomization-example.html">Pie Chart Customization Example</a>, <a href="qtcharts-donutchart-example.html">DonutChart Example</a>, <a href="qtcharts-donutbreakdown-example.html">Donut Chart Breakdown Example</a>, and <a href="qtcharts-nesteddonuts-example.html">Nested Donuts Example</a>.</p>
<a name="box-and-whiskers-charts"></a>
<h3 >Box-and-Whiskers Charts</h3>
<p>The box-and-whiskers charts present data as quartiles extended with whiskers that show the variability of the values. The items in box plot series are grouped by category, similarly to bar sets in bar series. For each box-and-whiskers item, the lower extreme, lower quartile, median, upper quartile, and upper extreme value are specified.</p>
<p>A box-and-whiskers chart is implemented by using the <a href="qboxplotseries.html">QBoxPlotSeries</a> and <a href="qboxset.html">QBoxSet</a> classes or the <a href="qml-qtcharts-boxplotseries.html">BoxPlotSeries</a> and <a href="qml-qtcharts-boxset.html">BoxSet</a> QML types.</p>
<p class="centerAlign"><img src="images/examples_boxplotchart.png" alt="" /></p><p>For more information, see <a href="qtcharts-boxplotchart-example.html">Box and Whiskers Example</a>.</p>
<a name="candlestick-charts"></a>
<h3 >Candlestick Charts</h3>
<p>Candlestick charts presents a series of data shown as candlesticks.</p>
<p class="centerAlign"><img src="images/examples_candlestickchart.png" alt="" /></p><p>A candlestick chart is implemented by using the <a href="qcandlestickseries.html">QCandlestickSeries</a> and <a href="qcandlestickset.html">QCandlestickSet</a> classes or the <a href="qml-qtcharts-candlestickseries.html">CandlestickSeries</a> and <a href="qml-qtcharts-candlestickset.html">CandlestickSet</a> QML types.</p>
<a name="polar-charts"></a>
<h3 >Polar Charts</h3>
<p>Polar charts present data in a circular graph, where the placement of data is based on the angle and distance from the center of the graph, the <i>pole</i>.</p>
<p class="centerAlign"><img src="images/examples_polarchart.png" alt="" /></p><p>The <a href="qpolarchart.html">QPolarChart</a> class is a specialization of the <a href="qchart.html">QChart</a> class. It supports line, spline, area, and scatter series, as well as all the axis types supported by them. The axis can be used either as a radial or an angular axis. In QML, the corresponding type is <a href="qml-qtcharts-polarchartview.html">PolarChartView</a>.</p>
<p>For more information, see <a href="qtcharts-polarchart-example.html">Polar Chart Example</a> and <a href="qtcharts-qmlpolarchart-example.html">Qml Polar Chart</a>.</p>
<a name="axes"></a>
<h2 id="axes">Axes</h2>
<p>Qt Charts supports the following axis types:</p>
<ul>
<li>Value axis</li>
<li>Category axis</li>
<li>Bar category axis</li>
<li>Date-time axis</li>
<li>Logarithmic value axis</li>
</ul>
<p>An axis can be set up to show a line with tick marks, grid lines, and shades. The values on the axis are drawn at the positions of tick marks. All axis types are specializations of the <a href="qabstractaxis.html">QAbstractAxis</a> class or the <a href="qml-qtcharts-abstractaxis.html">AbstractAxis</a> QML type.</p>
<p>A value axis adds real values to a chart's axis. It is implemented using the <a href="qvalueaxis.html">QValueAxis</a> class or the <a href="qml-qtcharts-valueaxis.html">ValueAxis</a> QML type.</p>
<p>A category axis is implemented using the <a href="qcategoryaxis.html">QCategoryAxis</a> class or the <a href="qml-qtcharts-categoryaxis.html">CategoryAxis</a> QML type. It has named ranges and adjustable range widths.</p>
<p>The bar category axis is similar to a category axis, but the range width is the same for all ranges. A bar category axis is implemented using the <a href="qbarcategoryaxis.html">QBarCategoryAxis</a> class or the <a href="qml-qtcharts-barcategoryaxis.html">BarCategoryAxis</a> QML type.</p>
<p>A date-time axis adds dates and times to a chart's axis. It is implemented using the <a href="qdatetimeaxis.html">QDateTimeAxis</a> class or the <a href="qml-qtcharts-datetimeaxis.html">DateTimeAxis</a> QML type.</p>
<p>A logarithmic axis adds a logarithmic scale to a chart's axis. A logarithmic scale is a nonlinear scale that is based on orders of magnitude, so that each tick mark on the axis is the previous tick mark multiplied by a value. A logarithmic axis is implemented using the <a href="qlogvalueaxis.html">QLogValueAxis</a> class or the <a href="qml-qtcharts-logvalueaxis.html">LogValueAxis</a> QML type.</p>
<p>Multiple axes can be defined for one chart. The axes can be placed down, up, left, or right of the chart. Further, the axes can be of different types. However, mixing axis types that would result in different domains is not supported, such as specifying <a href="qvalueaxis.html">QValueAxis</a> and <a href="qlogvalueaxis.html">QLogValueAxis</a> on the same orientation.</p>
<p>For more information, see <a href="qtcharts-datetimeaxis-example.html">DateTimeAxis Example</a>, <a href="qtcharts-logvalueaxis-example.html">Logarithmic Axis Example</a>, <a href="qtcharts-multiaxis-example.html">Multiple Axes Example</a>, and <a href="qtcharts-qmlaxes-example.html">Qml Axes</a>.</p>
<a name="legend"></a>
<h2 id="legend">Legend</h2>
<p>A legend is a graphical object that displays the legend of a chart. Legend objects cannot be created or deleted, but they can be referenced via the <a href="qchart.html">QChart</a> class or the <a href="qml-qtcharts-chartview.html">ChartView</a> QML type. The legend state is updated by <a href="qchart.html">QChart</a> or <a href="qml-qtcharts-chartview.html">ChartView</a> when series change.</p>
<p>A legend can be positioned below or above the chart, as well as to the left or right of it. By default, the legend is attached to the chart view, but it can be detached to a separate graphics item that can be moved around freely.</p>
<p>It is possible to hide either individual markers from the legend or the whole legend.</p>
<p>Legend markers can be modified by using the <a href="qlegendmarker.html">QLegendMarker</a> base class and the subclasses for each series type: <a href="qarealegendmarker.html">QAreaLegendMarker</a>, <a href="qbarlegendmarker.html">QBarLegendMarker</a>, <a href="qboxplotlegendmarker.html">QBoxPlotLegendMarker</a>, <a href="qcandlesticklegendmarker.html">QCandlestickLegendMarker</a>, and <a href="qxylegendmarker.html">QXYLegendMarker</a>.</p>
<p>In QML, legend markers can be modified by creating custom legends, as illustrated by the <a href="qtcharts-qmlcustomlegend-example.html">Qml Custom Legend</a> example.</p>
<a name="interacting-with-charts"></a>
<h2 id="interacting-with-charts">Interacting with Charts</h2>
<p>End users can interact with charts by dynamically adding values to them, drilling down into data, zooming into and out of charts, scrolling charts, and clicking items in charts or hovering the mouse over them.</p>
<a name="drawing-data-dynamically"></a>
<h3 >Drawing Data Dynamically</h3>
<p>It is possible to add data to charts dynamically and to make the chart view scroll automatically to display the new data.</p>
<p>For more information, see <a href="qtcharts-dynamicspline-example.html">Dynamic Spline Example</a>.</p>
<a name="drilling-down-into-data"></a>
<h3 >Drilling Down into Data</h3>
<p>Drilldown effects can be implemented to bar or pie charts, for example. When users select an item in the chart, a more detailed view of the item is displayed. This is implemented by deleting the first series and adding another one.</p>
<p>For more information, see <a href="qtcharts-stackedbarchartdrilldown-example.html">StackedBarChart Drilldown Example</a> and <a href="qtcharts-piechartdrilldown-example.html">PieChart Drilldown Example</a>.</p>
<a name="zooming-and-scrolling"></a>
<h3 >Zooming and Scrolling</h3>
<p>Users can use the keyboard for zooming and scrolling. They can scroll charts by using the arrow keys and zoom into or out of charts by using the plus and minus keys. In addition, QRubberBand can be used for selecting the area to zoom into.</p>
<p>On touch devices, gestures can be used for panning and zooming.</p>
<p>For more information, see <a href="qtcharts-zoomlinechart-example.html">Zoom Line Example</a>.</p>
<a name="clicking-and-hovering"></a>
<h3 >Clicking and Hovering</h3>
<p>You can connect slots to signals emitted when end users click items in charts or hover the mouse over them. This enables you to add elements, such as callouts, to the charts.</p>
<p>For more information, see <a href="qtcharts-callout-example.html">Callout Example</a>.</p>
<a name="themes"></a>
<h2 id="themes">Themes</h2>
<p>A theme is a built-in collection of UI style related settings applied to all the visual elements of a chart, such as colors, pens, brushes, and fonts of series, as well as axes, title, and legend.</p>
<p class="centerAlign"><img src="images/examples_chartthemes_blue_cerulean.png" alt="" /></p><p>Qt Charts comes with the following predefined themes:</p>
<ul>
<li>Light theme, which is the default theme</li>
<li>Cerulean blue theme</li>
<li>Dark theme</li>
<li>Sand brown theme</li>
<li>Natural color system (NCS) blue theme</li>
<li>High contrast theme</li>
<li>Icy blue theme</li>
<li>Qt theme</li>
</ul>
<p>The themes can be customized by changing the colors, pens, brushes, and fonts. New themes can be added by modifying the Qt Charts source code.</p>
<p><b>Note: </b>Changing the theme will overwrite all customization previously applied to the series.</p><p>For more information, see the <a href="qtcharts-chartthemes-example.html">Chart themes example</a>.</p>
</div>
<!-- @@@qtcharts-overview.html -->
</div>
</div>
</div>
</div>
</div>
<div class="footer">
<p>
<acronym title="Copyright">©</acronym> 2017 The Qt Company Ltd.
Documentation contributions included herein are the copyrights of
their respective owners.<br> The documentation provided herein is licensed under the terms of the <a href="http://www.gnu.org/licenses/fdl.html">GNU Free Documentation License version 1.3</a> as published by the Free Software Foundation.<br> Qt and respective logos are trademarks of The Qt Company Ltd. in Finland and/or other countries worldwide. All other trademarks are property
of their respective owners. </p>
</div>
</body>
</html>
distrib
>
Mageia
>
6
>
x86_64
>
media
>
core-updates
>
by-pkgid
>
19952c5e751bf7e3108c3c59625b0f35
>
files
>
372
