Qt Chart
– Qt Library

 

 

Qt Chart
Qt Library

Qt Chart 는 다양한 Chart 를 그리는데 사용하기 편리한 컴퍼넌트 모음을 제공합니다.

Qt Chart 는 다양한 Chart 를 그리는데 사용하기 편리한 컴퍼넌트 모음을 제공합니다.

Overview

> Qt Chart Module은 Qt 5.7 상용 제품에서 제공되는 Add-on Module 입니다.

> Qt Chart Module 은 다양한 Chart 를 그리는데 사용하기 편리한 Chart Component 모음을 제공합니다.

> 본 문서는 Qt Chart 를 이용해 구현한 예제 모음 입니다. 각 예제 들의 소스코드가 포함된 Tutorial 은 http://doc.qt.io/qt-5/qtcharts-index.html 에서 확인 할 수 있습니다. QML chart 를 이용한 Application 까지 다양한 활용 예제를 확인해 볼 수 있습니다.

> Qt 5.7 상용 제품의 체험 판은 https://www.qt.io/download-eval-for-applications-step-2/ 에서 다운로드 할 수 있습니다.

> Qt Chart 구현에 관한 문의 사항은 qtsales@ocube.co.kr 로 연락 바랍니다.

Features

> 다양한 타입의 Chart 옵션을 선택할 수 있습니다. Line, Spline, Area, Scatter, Bar, Pie , Polar, Box and Whisker 등

> 대규모 data rendering 의 Performance 향상을 위해 OpenGL을 사용합니다(QAbstractSeries::useOpenGL).

> Qt Graphics View Framework 를 사용하여 GUI 에 통합시킬 수 있으며 , Qwidget(QChartView), QGraphicsWidget, QML type 에서 이용 가능합니다.

> Dynamic Data Drawing, Drilldown 과 Zoom 기능 등 Interactive 한 Chart 를 구현 할수 있습니다.

> Minimal configuration 이 가능하기 때문에 Embedded 환경에서도 뛰어난 performance 를 보여줍니다.

C++ Examples

C++ Examples

AreaChart Example

> 두 개의 QLineSeries 인스턴스를 이용해 만든 line Chart 를 경계로 QAreaSeries 를 이용해 제작한 Area Chart 예제입니다.

> QChartView instance 를 사용해서 title, anti-aliasing property, axes range 등을 설정합니다.

Audio Example

> QIODevice, QAudioDeviceInfo , QAudioFormat 등을 이용해 microphone 으로 받은 Dynamic Audio Data 를QChartView 를이용해 출력하는 예제 입니다.

BarChart Example

> 카테고리 별로 각기 다른 Data 를 Bar Type Chart 로 보여주는 예제 입니다. Bar Chart 를 구성하기 위해서는 QBarSet instance 에서 Data 를 정의합니다.

> Qchart object 를 이용해서 title 과 Axis 를 Setting 하고 Legend 도 표시해 줍니다.

BarModelMapper Example

> Model/View style 의 Chart 를 구성하기 위해서 QTableView 를사용한 예제 입니다. QAbstractTableModel 에서 만들어진 custom table model 을 이용해 Table view 에 setting 합니다.

> Chart 는 QchartQVBarModelMapper 를 이용해서 series data를 Add 합니다.

Box and Whiskers Example

> File 로부터 불연속 적인 data 를 읽어 들여 중간 값을 찾고 box & whisker style 로 plot 하는 예제 입니다.

> Box & Whisker Chart 는 QBoxPlotSeries 를 이용해서 data 를handling 합니다.

> Text file 을 open 하기 위해서 Qfile 클래스가 사용되었습니다.

> Median 값을 찾기 위해 QStringListqSort 가 사용됩니다.

Callout Example

> Line Chart 의 좌표 값을 읽어 Callout mark 안에 표시하는 예제 입니다.

> Mouse over 로 자동으로 값을 읽어 들여 화면에 표시해 줍니다. Qchart 의 멤버 함수인 QChart::mapToPosition 와 QChart::mapToValue 가 사용됩니다.

Chart Theme Example

> Qt Chart 에서 지원하는 모든 Chart Type 에는 build-in Theme 를 적용할 수 있습니다. 보다 조화로운 시각 효과를 위해서 Application Window 의 background palette 도 함께 customized 합니다.

> Qt 의 Main Chart API 인 QChart Class 에 7가지 pre-built in Chart  theme 를 지원합니다.
– ChartThemeLight, ChartThemeBlueCerulean , ChartThemeDark, ChartThemeBrownSand, ChartThemeBlueNcs, ChartThemeHighContrast, ChartThemeBlueIcy, ChartThemeQt

BarChart Example

> Chart 에 사용된 component 들을 QPen , Qfont , QLinearGradient , Qbrush 등을 이용해 Customize 하는 예제 입니다.

> Data Series, Title, Background, Plot Area Background, Axes 등 대부분의 Component를 Customize 할 수 있습니다.

DateTimeAxis Example

> 시간에 따른 태양 흑점 주기를 QLineSeries 로 만든 line chart 입니다. 원본 data 는 text file 형태로 되어 있고, QDateTime Object 가 참조 가능한 data 로 converting 합니다.

> QChartView 오브젝트를 Qchart 파라미터로 생성하여 Chart 를 plot합니다. Qpainter 를 이용해 Antialiasing 를 추가 합니다.

Donut Chart Example

> 간단한 Donut Chart + Customization 이 포함된 예제 입니다.

> QPieSeriesQPieSlice 를 사용하여 donut chart 를 제작하며, QChartView 를 이용해 BlueCerulean 테마를적용하였습니다.

Donut Chart Breakdown

> 세 개의 QPieSeries object 를 생성해서 세 개의 Slice를 정의합니다. Donut Chart 를 원하는 영역 별로 Breakdown 하는 예제 입니다.

> 세부적인 slice 별 Legend 를 추가 하였습니다.

StackedBarChart Example

> Stacked Bar Chart 는 Category 별 Data 를 Stack 으로 쌓아 구분해 보여줍니다.  일반적인 Bar Chart 와 크게 다른 점은 없으나 Series 를 QStackedBarSeries 를 이용한다는 점이 다릅니다.

HorizontalBarChart Example

> QBarSet 으로 정의된 instance 를 QHorizontalBarSeries 를 이용하면 수평으로 되어 있는 Bar Chart 를 간단히 구현할 수 있습니다.

> Legend 도 Qt::AlignBottom 를 이용해서 수평 형태로 Chart 밑에 위치시킵니다.

HorizontalPercentBarChart

> 수평 Bar Chart 에서 각 카테고리 별 Percentage 를 보여주는 형태의 Chart 예제입니다. 일반적인 Bar Chart 에서 QBarSeries를 사용하는것과 달리 QHorizontalPercentBarSeries 를 사용하면 간단하게 Percentage 별로 분류 되어 있는 Chart 를 구성할 수 있습니다.

HorizontalStackedBarChart

> 왼편의 Horizontal Percent Bar Chart 와 동일하나 X축의 총합이 100이 아닌 Stack 으로 이루어져 있는 Chart 입니다. 동일한 Data 로 만들어진 Chart 이기때문에 차이를 쉽게 확인해 볼 수 있습니다.

> QHorizontalStackedBarSeries API 를 사용하면 쉽게 구현할 수 있습니다.

Legend Example

> Legend 를 Chart 에서 따로 떼어내 Chart 와 별도로 독립시킬 수도 있고, Chart 내에 포함시킬 수도 있습니다. Chart 내에 포함 될때는 alignment 가 수정될 수도 있습니다. Legend 를 Chart 와 병행시키는 다양한 방법에 대한 예제 입니다.

> Control 메뉴의 QWidgetQPushButton QGridLayout QDoubleSpinBox QGroupBox 등을 이용해 제작되었습니다. Chart 는 일반적인 QBarSeriesQBarSet 으로 제작됩니다. Legend 의 font 를 조절하는 옵션은 Qfont 를 이용합니다.

LegendMarkers Example

> LegendMarker 를 클릭하면 Chart 를 visible/invisible 하게 다룰 수 있도록 한 예제 입니다.

> QLegendMarkerQlegend 내부의 marker 에 access 할 수 있는 abstract object 로서, Legend Marker 는 Colored Box 와 Label 의 두가지로 구성되어 있습니다. 단순히 안보이게 하는 것뿐 아니라 Marker가 Toggele 되었을 때 Alpha값을 Dimming 할 수 도 있습니다.

LineChart Example

> 기본 적인 형태의 Line Chart 를 구성하는 예제 입니다.

> QLineSeries 인스턴스를 Create 한 후 Series 값을 입력합니다. 이후 QChart 인스턴스를 Create 한 후 series, Axis, title 를 세팅합니다.

> 마지막으로 QChart 를 파라미터로 하는 QChartView Object를 생성하면 간단하게 Line Chart 가 만들어 집니다.

Line and BarChart Example

> Line Chart 와 Bar Chart 를 양쪽 모두의 Category Axis를 동일하게 공유 하면 두 chart 를 한번에 표시할 수 있습니다. 이를 위해서 custom axes 를 만들어서 두 개의 series range 가 동일한 axis 를 따르도록 만들어 주어야 합니다. X-Axis 는 QBarCategoryAxis를사용하고, Y-Axis 는 QValueAxis 를 사용 합니다.

Logarthmic Axis Example

> Line Chart 의 Axis 에 QLogValueAxis 를 이용하면 Logarithmic Axis 를 구현할 수 있습니다. 예제 Chart 의 X-Axis 는일반적인 QValueAxis 로 되어 있습니다. 예제 Chart 의 Y-Axis 는 QLogValueAxis 에 의한 Value 입니다.

Model Data Example

> AbstractTableModel 을 사용한 Model / View(Chart) 형태의 Chart 입니다.

> Model Data 는 QTableView 를 이용해서 구현되었습니다.

Multiple Axes Example

> 여러 개의 Axis 를 가지는 Chart 를 구성한 예제 입니다. Chart는 QSplineSeries 로, Axes 는 QValueAxis ,QCategoryAxis 로 구성됩니다.

Nested Donuts Example

> 중첩된 Donut Chart가 또한 각각 여러 개의 Slice로 구분되어 있는 예제입니다. 각각의 Chart 는 QPieSeries로 Slice 는 QPieSlice 로 object 가생성됩니다.

> 재미있는 효과를 주기 위해 Chart 는 Qtimer를 이용해 1.25 sec 마다 Random하게 Rotate 합니다.

OpenGL Accelerated Series

> Data Series 의 OpenGL 가속은 QLineSeriesQScatterSeries 에서만지원됩니다. OpenGL 가속 기능은 단지QAbstractSeries::useOpenGL프로퍼티 를 true로 설정하면 됩니다.

> 가속 기능이 구동되면 QOpenGLWidget 가 transparent 하게 instantiate되며, chart 위에 가속된 series 를 draw 합니다.

Temperature Records Example

> QBarCategoryAxis를이용해서 구성한 간단 한 Bar 형태의 Temperature Record Bar Chart 입니다.

Pie Chart Customization Example

> Pie chart 를 Widget Control과 함께 Customization 한 Chart 예제입니다.

Polar Chart Example

> Scrolling 과 Zooming 기능을 가진 Polar Chart 를 구현한 예제 입니다.

> Polar Chart 는 QPolarChart instance 를 이용해서 제작됩니다. Axes를구성할 때, Cartesian Chart 와 동일한 방식을 따르면 되며, alignment 대신에 polar orientation 을 사용할 수 있습니다.

ScatterChart Example

> Scatter Chart 의 예제 입니다. Scatter Chart 는 QScatterSeries instance 를이용해 제작 합니다.

> QPainterPath 를 이용해서 흩뿌릴 Image 를 입력 받아 사용할 수 있습니다.

Scatter Interactions Example

> QScatterSeries 로 만들어진 Scatter chart 가 두 종류의 data series 를 포함합니다. 클릭이 되면 한쪽의 data series 에서 다른 쪽 Series 로 link 를 바꾸어주며 화면상으로는 scattered point 의 색상을 교체 합니다.

StackedBarChart Drilldown Example

> Stacked Bar Chart 를 이용해서 Click 하면 Seanson(Monthly)->Weekly chart 로 Drill down 되는 예제 입니다.

> Drilldown Bar Series 의 Structure는 QStackedBarSeries 를 이용해서 만듭니다.

> 모든 QBarSeries 를 상속받은 클래스는 클릭 했을 때 signal(QBarSet* -> 클릭된 bar set 포인터, int-> 클릭된 카테고리 인덱스) 을 발생시킵니다.

Spline Chart Example

> QSplineSeries 를 사용한 기본적인 spline chart 예제입니다.

Dynamic Spline Example

> 스플라인 함수에 의한 Dynamic Chart 를 생성해주는 예제 입니다.

> QSplineSeries 가 사용됩니다. QSplineSeriesQPainterPath 에 의해 필요한 segment control point 와 함께 data point 를 저장하여 Data 변화에 따라 자동으로 spline Control point 를 그려줍니다.

StackedBarChart Drilldown Example

> QRubberBand 를 이용한 custom Zooming 기능을 구현한 예제 입니다.

> QKeyEvent QMouseEvent QGestureEvent 를 이용해 key/mouse/gesture 등의 event 를 zoom in 기능으로 이용할 수 있습니다.

 

QML Examples

QML Examples

QML Axes Example 1

> QML 의 ValueAxis 를 이용해 만든 Chart 로 Line Chart 와 Scatter Chart 가 섞여 있습니다.

> Line 과 Scatter Series 는 각각 LineSeries ScatterSeries 를 이용해 구성합니다.

QML Axes Example 2

> QML 의 DateTimeAxis 를 사용한 예제 입니다. LineSeriesXYPoint 를 사용해 Axes Value를setting 하였습니다.

QML Axes Example 3

> Data 를 쉽게 이해할 수 있도록 QML CategoryAxis 를 사용한 예제입니다.

> LineSeriesCategoryRange 를 사용합니다.

QML Charts Example 1

> LineSeriesXYPoint 를 사용해서 만든 QML Line Chart 입니다.

QML Charts Example 2

> Spline chart 도 제작 가능합니다. QML Type 인 SplineSeriesXYPoint 값을 정해주면간단하게 Spline Chart 를 구성할 수 있습니다.

QML Charts Example 3

> AreaSeries QML Type 을 이용하면 손쉽게 Area Chart  를 만들 수 있습니다. Area 는 LineSeries 로 영역을 구성합니다.

QML Charts Example 4

> ScatterSeriesXYPoint 를 이용해서 구성한 Scatter Chart 입니다.

QML Charts Example 5

> PieSeries QML Type 을 이용하면 손쉽게 Pie Chart 를 만들 수 있습니다.PieSlice 로 각Slice의 Value 와 Label을 지정합니다.

QML Charts Example 6

> 두개의 PieSeries 의 Size 와 holeSize 를 조절하여 Donut Chart 를 제작할 수 있는 예제입니다.

QML Charts Example 7

> QML Type 인 BarSeriesBarSet 을 사용해서 구성한 Bar Chart 입니다.

QML Charts Example 8

> StackedBarSeriesBarSet 을 이용해 구성한 Stacked Bar Chart 입니다.

QML Charts Example 9

> PercentBarSeries 를 사용하면 Percent Bar chart 를 구현할 수 있습니다. Stacked Bar Series 와 달리 BarSet 에 value 를 입력하면 자동으로 Percent 변환하여 표시해 줍니다.

QML Custom Legend

> ChartView QML Type 에 지정되어 있는 built-in Legend 대신에, Custom Legend 를 제작하는 Example 입니다.

> AreaSeries 를 수정하여 animated area Chart 를 만들었으며, Mouse Hover 와 Click 으로 Chart 를 세분화 하여 조사할 수 있습니다. 이를 위해 MouseAreaGradient 관리가 필요 합니다.

> Custom Legend 는 Component Rectangle 등의 QML Type 을 이용하여 직접 제작하고,  Signal 로 event 처리를 합니다.

QML Customizations

> 여러 가지 QML Type 을 복합한 Custom Chart 입니다. 에니메이션효과를 사용하여 실제로 Wheel(Pie)가돌아가도록 제작되어 있습니다. 돌아가다가 멈추면 조각이 떨어져 나오고 Value 를 scatter 가 point하도록 움직입니다.

> PieSeries SplineSeries ScatterSeries 를 각각 Customize하였습니다. Chartview 와 Series 간의 다양한 Visual Property 를 어떻게 customize 하는지 살펴볼 수 있습니다.

QML F1 Legends

XmlListModel 을 사용하여 data source 를 입력 받습니다.실제 application 에 사용된다면 timing System 을 통해 XML data 를 직접 받을 수 있습니다. Data 는 Timer를 이용해서 Parse 됩니다.

QML Oscilloscope

> Oscilloscope Application 은 Qt Chart 에서 제공하는 QML API를 고 신뢰도가 요구되는 Application에서 구현하는 예제를 보여줍니다.

> 실제 output console에서의 Rendering Time을 구현하기 위해서 configuration option을 조절해야 합니다.

> Application은 크게 Scope/Control View 로 구성됩니다.

> Wave 는 LineSeries 를 이용해 구현하였습니다. 본 예제의 lineseries 는 QML Timer 를 이용해서 구현되었으나, 실제의 Embedded Application 에서는 Qt C++ Code 에서 보내주는 Signal 을 이용해서 구현할 수 있습니다.

QML Weather App.

> http://www.worldweatheronline.com/ 에서 제공하는 Weather API 에 access 하여 Data를 받아 오는 QML example 입니다. Chart 는 LineSeriesBarSeries 를 이용하여 구성되었으며, Data 를 받아 오기 위한 request 는 HTTP GET, response 는 JSON data 포맷을 활용 합니다.

> Weather Icon URL 의 container 는 Qt 의 ListModel 를 사용하였습니다.

QML Polar Chart 1 

> QML 을 이용한 첫 번째 Polar Chart 예제는SplineSeriesScatterSeries를 결합하여구성하였습니다.

> 각각의 Series 는 동일한 Axis 를 공유합니다.

> Polar Chart 는 Series 의 Axis를 axisAngular 와 axisRadial axes 를 사용하면 됩니다.

QML Polar Chart 2

> QML Type 인 DateTimeAxisAreaSeries 를 이용해구성한 Polar Chart 예제 입니다. AreaSeriesLineSeries 두개를 사용하여 lowerseries/upperseries 를 정의하고 사이를 채워주는 방식으로 운영합니다.

> 첫 번째 예제와 마찬가지로  axisAngular 와 axisRadial axes 를 사용하여 Polar Chart 를구성하였습니다.

QML Polar Chart 3

> 마지막 Polar Chart 는 Data 를 보다 쉽게 이해할 수 있도록 CategoryAxis를 이용 하여 구현되었습니다.

> LineSeries 안에 axisRadialCategoryAxis 로 Define 합니다.