HelloGraphs

Qt Quickアプリケーションで2D用のGraphsを使う。

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.の商標です。その他すべての商標は、それぞれの所有者に帰属します。