ハローグラフ

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

© 2025 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.