Qt Charts 개요

Qt Charts 세련되고 상호작용이 가능하며 데이터 중심의 사용자 인터페이스를 만들 수 있습니다. Qt Charts 는 간편한 통합을 위해 Graphics View Framework를 사용합니다. 차트 컴포넌트는 QWidget 또는 QGraphicsWidget 객체, 혹은 QML 유형으로 사용할 수 있습니다.

QChart 클래스는 다양한 유형의 시리즈와 범례, 축 등 차트와 관련된 기타 객체들의 그래픽 표현을 관리합니다. QChart는 QGraphicsScene 내에서 표시될 수 있는 QGraphicsWidget 입니다. 더 간단한 방법은 QChart 대신 편의 클래스인 QChartView를 사용하여 레이아웃에 차트를 표시하는 것입니다. QML에서는 ChartView 유형을 사용하여 차트를 표시합니다.

일부 차트 구성 요소는 QChart 클래스의 특화형인 QPolarChart 클래스나 ChartView 유형의 특화형인 PolarChartView QML 유형을 사용하여 극좌표 차트로 표시할 수도 있습니다.

차트의 모양과 느낌은 테마를 사용하거나, 색상과 속성을 수정하거나, 차트 컴포넌트를 숨기거나, 차트에 애니메이션을 적용하여 사용자 정의할 수 있습니다.

모델 매퍼를 사용하면 QAbstractItemModel 클래스에서 파생된 데이터 모델을 차트의 데이터 소스로 사용할 수 있습니다. 모델 매퍼는 수평형 또는 수직형일 수 있습니다.

차트 유형

Qt Charts 모듈은 다음과 같은 차트 유형을 제공합니다:

• 선형 및 스플라인 차트
• 면형 및 산점도 차트
• 막대 차트
• 원형 차트
• 박스 앤 위스커 차트
• 캔들스틱 차트
• 극좌표 차트

각 차트 유형은 QML에서 QAbstractSeries의 파생 클래스 또는 AbstractSeries의 파생 유형으로 표현됩니다. 차트는 시리즈 클래스의 인스턴스를 사용하여 생성한 후, 이를 QChart 또는 ChartView 인스턴스에 추가함으로써 만들어집니다.

예를 들어:

QLineSeries* series = new QLineSeries();
series->add(0, 6);
series->add(2, 4);
...
chartView->chart()->addSeries(series);
chartView->chart()->createDefaultAxes();

또는 QML에서는 다음과 같습니다:

ChartView {
    id: chart
    title: "Top-5 car brand shares in Finland"
    anchors.fill: parent
    legend.alignment: Qt.AlignBottom
    antialiasing: true

    property variant othersSlice: 0

    PieSeries {
        id: pieSeries
        PieSlice { label: "Volkswagen"; value: 13.5 }
        PieSlice { label: "Toyota"; value: 10.9 }
        PieSlice { label: "Ford"; value: 8.6 }
        PieSlice { label: "Skoda"; value: 8.2 }
        PieSlice { label: "Volvo"; value: 6.8 }
    }

    Component.onCompleted: {
        // You can also manipulate slices dynamically, like append a slice or set a slice exploded
        othersSlice = pieSeries.append("Others", 52.0);
        pieSeries.find("Volkswagen").exploded = true;
    }
}

import QtQuick

하나의 차트에 서로 다른 유형의 시리즈를 결합할 수 있습니다.

선형 및 스플라인 차트

선형 및 스플라인 차트는 데이터를 선으로 연결된 일련의 데이터 포인트로 표시합니다. 선형 차트에서는 데이터 포인트가 직선으로 연결되는 반면, 스플라인 차트에서는 스플라인으로 연결됩니다. 스플라인은 ` QPainterPath`를 사용하여 그려집니다.

선 차트는 QLineSeries 클래스나 LineSeries QML 유형을 사용하여 구현됩니다.

스플라인 차트는 QLineSeries를 상속하는 QSplineSeries 클래스나 LineSeries를 상속하는 SplineSeries 유형을 사용하여 구현됩니다.

자세한 내용은 선 차트 만들기 및 스플라인 차트 만들기를 참조하십시오. 선 차트와 막대 차트를 결합하고 두 차트에 공통 축을 사용하는 예제는 선 및 막대 차트 결합을 참조하십시오.

면 차트 및 산점도

영역 차트는 데이터를 두 선으로 둘러싸인 영역으로 표시하는 반면, 산점도는 데이터를 점의 집합으로 표시합니다.

영역 차트는 QAreaSeries 클래스나 AreaSeries QML 유형을 사용하여 구현됩니다. 기본적으로 x축이 한쪽 경계로 사용되고, QLineSeries 또는 LineSeries가 다른 쪽 경계로 사용됩니다. 그러나 QLineSeries 또는 LineSeries를 양쪽 경계로 모두 사용할 수도 있습니다.

산점도는 QScatterSeries 클래스나 ScatterSeries QML 유형을 사용하여 구현합니다.

자세한 내용은 ‘면적 차트 만들기 ’ 및 ‘산점도 만들기’를 참조하십시오.

막대 차트

막대 차트는 데이터를 범주별로 그룹화된 수평 또는 수직 막대 형태로 표시합니다. QBarSet 클래스와 BarSet QML 유형은 막대 차트 내의 하나의 막대 세트를 나타냅니다. QAbstractBarSeries 클래스는 모든 막대 시리즈 클래스의 추상 상위 클래스이며, AbstractBarSeries 유형은 막대 시리즈 유형의 상위 유형입니다. 시리즈 유형에 따라 데이터가 표시되는 방식이 결정됩니다.

QBarSeries 클래스와 BarSeries QML 유형은 데이터를 범주별로 그룹화된 세로 막대 형태로 표시합니다. 마찬가지로, QHorizontalBarSeries 클래스와 HorizontalBarSeries QML 유형은 데이터를 가로 막대 형태로 표시합니다.

QStackedBarSeries 클래스와 StackedBarSeries 유형은 데이터 시계를 범주별로 하나의 막대씩 수직으로 쌓인 막대 형태로 표시합니다. 이에 상응하는 수평 클래스와 유형은 각각 QHorizontalStackedBarSeries와 HorizontalStackedBarSeries입니다.

QPercentBarSeries 클래스와 PercentBarSeries QML 유형은 범주별로 분류된 데이터 시계를 각 범주의 백분율로 표시합니다. 이에 상응하는 가로 방향 클래스와 유형은 각각 QHorizontalPercentBarSeries와 HorizontalPercentBarSeries입니다.

자세한 내용은 막대 차트 만들기, 수평 누적 막대 차트 만들기, 수평 막대 차트 만들기 및 수평 백분율 막대 차트 만들기를 참조하십시오.

파이 차트

파이 차트는 데이터를 파이 조각으로 구성된 파이 형태로 표시합니다. 파이는 QPieSeries 클래스 또는 PieSeries QML 유형을 사용하여 구현되며, 파이 조각은 QPieSlice 클래스 또는 PieSlice QML 유형을 사용하여 추가됩니다.

0.0에서 1.0 사이의 구멍 크기를 지정하여 원형 차트를 도넛 차트로 바꿀 수 있습니다.

자세한 내용은 위젯 갤러리가 포함된 차트, 도넛 분할 차트 만들기 및 중첩 도넛 차트 만들기를 참조하십시오.

박스 앤 위스커 차트

박스 앤 위스커 차트는 사분위수를 기반으로 하며, 값의 변동성을 나타내는 위스커가 확장된 형태로 데이터를 표시합니다. 박스 플롯 시리즈의 항목은 막대 시리즈의 막대 세트와 마찬가지로 범주별로 그룹화됩니다. 각 박스 앤 위스커 항목에 대해 하한값, 하사분위수, 중앙값, 상사분위수 및 상한값이 지정됩니다.

박스-위스커 차트는 QBoxPlotSeries 및 QBoxSet 클래스나 BoxPlotSeries 및 BoxSet QML 유형을 사용하여 구현됩니다.

자세한 내용은 ‘박스-위스커 차트 만들기’를 참조하십시오.

캔들스틱 차트

캔들스틱 차트는 일련의 데이터를 캔들스틱 형태로 표시합니다.

캔들스틱 차트는 QCandlestickSeries 및 QCandlestickSet 클래스나 CandlestickSeries 및 CandlestickSet QML 유형을 사용하여 구현됩니다.

극좌표 차트

극좌표 차트는 데이터를 원형 그래프로 표시하며, 데이터의 위치는 그래프의 중심인 극( pole)으로부터의 각도와 거리를 기준으로 결정됩니다.

QPolarChart 클래스는 QChart 클래스의 특화형입니다. 이 클래스는 선, 스플라인, 면적 및 산점도 시계열은 물론, 이들이 지원하는 모든 축 유형을 지원합니다. 축은 방사형 또는 각도형으로 사용할 수 있습니다. QML에서 이에 해당하는 유형은 PolarChartView입니다.

자세한 내용은 ‘극좌표 차트 만들기’ 및 ‘QML에서 극좌표 차트 사용하기’를 참조하십시오.

축

Qt Charts 다음과 같은 축 유형을 지원합니다:

• 값 축
• 범주 축
• 막대 범주 축
• 날짜-시간 축
• 대수 값 축

축은 눈금, 격자선 및 음영이 포함된 선을 표시하도록 설정할 수 있습니다. 축상의 값은 눈금 위치에 그려집니다. 모든 축 유형은 QAbstractAxis 클래스 또는 AbstractAxis QML 유형의 특화형입니다.

값 축은 차트의 축에 실수 값을 추가합니다. 이는 QValueAxis 클래스나 ValueAxis QML 유형을 사용하여 구현됩니다.

범주 축은 QCategoryAxis 클래스나 CategoryAxis QML 유형을 사용하여 구현됩니다. 이 축은 이름이 지정된 범위와 조정 가능한 범위 너비를 갖습니다.

막대 범주 축은 범주 축과 유사하지만, 모든 범위의 폭이 동일합니다. 막대 범주 축은 QBarCategoryAxis 클래스나 BarCategoryAxis QML 유형을 사용하여 구현됩니다.

날짜-시간 축은 차트의 축에 날짜와 시간을 추가합니다. 이는 QDateTimeAxis 클래스나 DateTimeAxis QML 유형을 사용하여 구현됩니다.

대수 축은 차트의 축에 대수 스케일을 추가합니다. 대수 스케일은 크기 단위를 기반으로 하는 비선형 스케일로, 축의 각 눈금은 이전 눈금에 특정 값을 곱한 값이 됩니다. 대수 축은 QLogValueAxis 클래스나 LogValueAxis QML 유형을 사용하여 구현됩니다.

하나의 차트에 여러 개의 축을 정의할 수 있습니다. 축은 차트의 아래, 위, 왼쪽 또는 오른쪽에 배치할 수 있습니다. 또한, 축의 유형을 서로 다르게 설정할 수도 있습니다. 그러나 동일한 방향에 QValueAxis와 QLogValueAxis를 지정하는 등, 서로 다른 도메인을 초래하는 축 유형의 혼합은 지원되지 않습니다.

자세한 내용은 ‘날짜 및 시간 축이 있는 선 차트’, ‘대수 값 축 사용’, ‘여러 축 사용’ 및 ‘QML에서 축 사용’을 참조하십시오.

범례

범례는 차트의 범례를 표시하는 그래픽 객체입니다. 범례 객체는 생성하거나 삭제할 수 없지만, QChart 클래스나 ChartView QML 유형을 통해 참조할 수 있습니다. 범례의 상태는 시리즈가 변경될 때 QChart 또는 ChartView에 의해 업데이트됩니다.

범례는 차트 위나 아래는 물론, 왼쪽이나 오른쪽에도 배치할 수 있습니다. 기본적으로 범례는 차트 뷰에 연결되어 있지만, 분리하여 자유롭게 이동할 수 있는 별도의 그래픽 항목으로 만들 수도 있습니다.

범례의 개별 마커나 범례 전체를 숨길 수 있습니다.

범례 마커는 QLegendMarker 기본 클래스와 각 시리즈 유형에 대한 하위 클래스(QAreaLegendMarker, QBarLegendMarker, QBoxPlotLegendMarker, QCandlestickLegendMarker, QXYLegendMarker)를 사용하여 수정할 수 있습니다.

QML에서는 ‘레전드 사용자 정의( Customizing Legends )’ 예제에서 볼 수 있듯이, 사용자 정의 레전드를 생성하여 레전드 마커를 수정할 수 있습니다.

차트와의 상호 작용

최종 사용자는 차트에 값을 동적으로 추가하고, 데이터를 드릴다운하고, 차트를 확대 및 축소하고, 차트를 스크롤하고, 차트 내 항목을 클릭하거나 마우스를 그 위에 올려놓는 등의 방식으로 차트와 상호 작용할 수 있습니다.

데이터 동적 그리기

차트에 데이터를 동적으로 추가하고, 새로운 데이터를 표시하기 위해 차트 보기가 자동으로 스크롤되도록 할 수 있습니다.

자세한 내용은 스플라인 차트 만들기를 참조하십시오.

데이터 드릴다운

드릴다운 효과는 예를 들어 막대 차트나 원형 차트에 구현할 수 있습니다. 사용자가 차트에서 항목을 선택하면 해당 항목에 대한 더 자세한 보기가 표시됩니다. 이는 첫 번째 시계를 삭제하고 다른 시계를 추가하여 구현됩니다.

자세한 내용은 ‘드릴다운 구현’을 참조하십시오.

확대/축소 및 스크롤

사용자는 키보드를 사용하여 확대/축소 및 스크롤을 수행할 수 있습니다. 화살표 키를 사용하여 차트를 스크롤하고, 더하기 및 빼기 키를 사용하여 차트를 확대하거나 축소할 수 있습니다. 또한, 확대할 영역을 선택하는 데 ‘ QRubberBand ’ 기능을 사용할 수 있습니다.

터치 기기에서는 제스처를 사용하여 화면을 이동하거나 확대/축소할 수 있습니다.

자세한 내용은 ‘확대/축소 선 예제’를 참조하십시오.

클릭 및 마우스 오버

최종 사용자가 차트 내 항목을 클릭하거나 마우스를 해당 항목 위로 가져갈 때 발생되는 신호에 슬롯을 연결할 수 있습니다. 이를 통해 차트에 설명 상자 등의 요소를 추가할 수 있습니다.

자세한 내용은 차트 위에 콜아웃 그리기를 참조하십시오.

테마

테마는 차트의 모든 시각적 요소(시리즈의 색상, 펜, 브러시, 글꼴은 물론 축, 제목, 범례 등)에 적용되는 UI 스타일 관련 설정의 내장 모음입니다.

Qt Charts 다음과 같은 사전 정의된 테마가 제공됩니다:

• 기본 테마인 ‘밝은 테마’
• 세룰리안 블루 테마
• 다크 테마
• 샌드 브라운 테마
• NCS(Natural Color System) 블루 테마
• 고대비 테마
• 얼음 같은 파란색 테마
• Qt 테마

테마는 색상, 펜, 브러시 및 글꼴을 변경하여 사용자 정의할 수 있습니다. Qt Charts 소스 코드를 수정하여 새로운 테마를 추가할 수 있습니다.

자세한 내용은 ‘테마를 사용하여 차트 만들기’를 참조하십시오.