Back to Qt.io
Contact Us Blog Download Qt
이 페이지에서

HelloGraphs

Qt Quick 애플리케이션에서 2D 그래프 사용하기.

HelloGraphs에서는 간단한 2D 막대 그래프와 선 그래프를 만드는 방법을 보여줍니다.

2024~2026년 막대 그래프와 두 개의 데이터 계열이 포함된 선 그래프

다음 섹션에서는 BarSeries 을 사용하여 막대 그래프를 만들고, LineSeries 을 사용하여 선 그래프를 만드는 방법을 설명합니다.

예제 실행

다음에서 예제를 실행할 수 있습니다.

BarGraph

예제의 첫 번째 그래프는 막대 그래프입니다. 이 그래프를 생성하려면 먼저 GraphsView 컴포넌트를 생성하고, X axis, Y axis 및 theme 를 설정해야 합니다. X축은 3개의 범주를 가진 BarCategoryAxis 입니다. 수직 격자와 축선은 모두 숨겨져 있습니다. Y축은 20에서 100 사이의 범위가 표시되는 ValueAxis 입니다. tickInterval 을 사용하여 값이 10씩 증가할 때마다 레이블이 포함된 주요 눈금이 표시됩니다. subTickCount 9 을 사용하여 값이 1씩 증가할 때마다 보조 눈금이 표시되며, 이는 각 주요 눈금 사이에 9개의 보조 눈금이 있음을 의미합니다. 마지막으로, 어두운 배경에 적합한 theme 테마가 적용됩니다. 이 테마는 그래프의 배경 격자, 축선 및 레이블을 조정합니다.

GraphsView {
    anchors.fill: parent
    anchors.margins: 16
    axisX: BarCategoryAxis {
        categories: [2024, 2025, 2026]
        gridVisible: false
        subGridVisible: false
    }
    axisY: ValueAxis {
        min: 20
        max: 100
        tickInterval: 10
        subTickCount: 9
    }
    theme: GraphsTheme {
        colorScheme: GraphsTheme.ColorScheme.Dark
        theme: GraphsTheme.Theme.QtGreen
    }
    ...

이를 막대 그래프로 만들려면 BarSeries 를 추가합니다.

BarSeries {
    ...

그런 다음 BarSet 를 사용하여 BarSeries 에 데이터를 추가합니다. 사용자 정의된 막대 색상과 테두리 속성이 지정된 3개의 막대가 있습니다. 이러한 속성은 GraphsTheme 에 설정된 seriesColors 를 재정의합니다.

BarSet {
    values: [82, 50, 75]
    borderWidth: 2
    color: "#373F26"
    borderColor: "#DBEB00"
}

선 그래프

이 예제의 두 번째 그래프는 선 그래프입니다. 이 그래프도 GraphsView 요소를 정의하는 것으로 시작합니다. 사용자 지정된 외관을 얻기 위해 사용자 지정 GraphsTheme 가 생성됩니다. GraphsTheme 는 배경 격자와 축에 대해 매우 폭넓은 사용자 지정 기능을 제공하며, 이러한 설정은 theme 에 적용된 후에 적용됩니다.

GraphsView 는 이 그래프에 적합한 axisX 와 axisY 를 정의합니다.

GraphsView {
    anchors.fill: parent
    anchors.margins: 16
    theme: GraphsTheme {
        readonly property color c1: "#DBEB00"
        readonly property color c2: "#373F26"
        readonly property color c3: Qt.lighter(c2, 1.5)
        colorScheme: GraphsTheme.ColorScheme.Dark
        seriesColors: ["#2CDE85", "#DBEB00"]
        grid.mainColor: c3
        grid.subColor: c2
        axisX.mainColor: c3
        axisY.mainColor: c3
        axisX.subColor: c2
        axisY.subColor: c2
        axisX.labelTextColor: c1
        axisY.labelTextColor: c1
    }
    axisX: ValueAxis {
        max: 5
        tickInterval: 1
        subTickCount: 9
        labelDecimals: 1
    }
    axisY: ValueAxis {
        max: 10
        tickInterval: 1
        subTickCount: 4
        labelDecimals: 1
    }
    ...

데이터 포인트를 시각화하기 위해 사용자 정의 Delegate 컴포넌트가 사용됩니다.

component Marker : Rectangle {
    width: 16
    height: 16
    color: "#ffffff"
    radius: width * 0.5
    border.width: 4
    border.color: "#000000"
}

이 그래프를 선 그래프로 만들려면 LineSeries 를 추가합니다. 이렇게 하면 pointDelegate 가 앞서 생성된 사용자 정의 Delegate 컴포넌트를 사용하도록 설정됩니다. 데이터 포인트는 XYPoint 요소를 사용하여 추가됩니다.

LineSeries {
    id: lineSeries1
    width: 4
    pointDelegate: Marker { }
    XYPoint { x: 0; y: 0 }
    XYPoint { x: 1; y: 2.1 }
    XYPoint { x: 2; y: 3.3 }
    XYPoint { x: 3; y: 2.1 }
    XYPoint { x: 4; y: 4.9 }
    XYPoint { x: 5; y: 3.0 }
}

두 번째 선 시리즈는 첫 번째와 유사합니다. 이는 GraphsView 내부의 두 번째 LineSeries 이므로, seriesColors 에서 두 번째 색상이 자동으로 선택됩니다.

LineSeries {
    id: lineSeries2
    width: 4
    pointDelegate: Marker { }
    XYPoint { x: 0; y: 5.0 }
    XYPoint { x: 1; y: 3.3 }
    XYPoint { x: 2; y: 7.1 }
    XYPoint { x: 3; y: 7.5 }
    XYPoint { x: 4; y: 6.1 }
    XYPoint { x: 5; y: 3.2 }
}

예제 프로젝트 @ code.qt.io

© 2026 The Qt Company Ltd. Documentation contributions included herein are the copyrights of their respective owners. The documentation provided herein is licensed under the terms of the GNU Free Documentation License version 1.3 as published by the Free Software Foundation. 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.