HelloGraphs

Qt Quick アプリケーションで 2D グラフを使う

HelloGraphsでは、簡単な2D棒グラフと折れ線グラフの作り方を紹介します。

以下のセクションでは、BarSeries を使って棒グラフを、LineSeries を使って折れ線グラフを作成する方法を説明します。

サンプルを実行する

Qt Creator からサンプルを実行するには、Welcome モードを開き、Examples からサンプルを選択します。詳細については、Building and Running an Example を参照してください。

バーグラフ

サンプルの最初のグラフは棒グラフです。作成はGraphsView コンポーネントから始め、X axis 、Y axis 、theme を設定します。X軸は3つのカテゴリーを持つBarCategoryAxis 。垂直グリッドも軸線も非表示です。Y軸はValueAxis 、可視範囲は20～100。ラベル付きの主要目盛りは、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"
}

線グラフ

この例の 2 番目のグラフは折れ線グラフです。これも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 }
}

2本目の折れ線グラフも1本目と同様です。これはGraphsView の中の2番目のLineSeries であるため、seriesColors から2番目の色が自動的に選択されます。

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

©2024 The Qt Company Ltd. 本書に含まれる文書の著作権は、それぞれの所有者に帰属します。ここで提供されるドキュメントは、Free Software Foundation が発行したGNU Free Documentation License version 1.3に基づいてライセンスされています。 Qtおよびそれぞれのロゴは、フィンランドおよびその他の国におけるThe Qt Company Ltd.の商標です。その他すべての商標は、それぞれの所有者に帰属します。