Back to Qt.io
Contact Us Blog Download Qt

Qt Graphs からの移行Qt Charts

Qt Charts とQt Graphs では API と機能が若干異なります。この記事では、Qt Charts とQt Graphs のAPIの違いについて説明します：

QMLのインポート文

Qt Charts のインポート文は、次のように変更する必要があります：

import QtCharts

のimport文は次のように変更する必要があります：

import QtGraphs

Qt Graphs の場合。

CMakeモジュールのインクルード

Qt Charts のインクルード

find_package(Qt6 REQUIRED COMPONENTS Charts)
target_link_libraries(mytarget PRIVATE Qt6::Charts)

を次のように変更する必要があります：

find_package(Qt6 REQUIRED COMPONENTS Graphs)
target_link_libraries(mytarget PRIVATE Qt6::Graphs)

forQt Graphs.

Qmake モジュールのインクルード

Qt Charts のインクルード

QT += charts

に変更する必要があります：

QT += graphs

forQt Graphs.

で欠けている機能Qt Graphs

これらの機能は、6.8 リリースではQt Graphs にありません：

  • Qt Graphs ウィジェット
  • ローソク足チャート
  • ボックス＆ウィスカー・チャート
  • タイトルと凡例
  • 対数軸
  • ポーラーチャート

テーマAPI

2Dグラフと3Dグラフのテーマ設定が統一された。テーマ設定については、GraphsTheme を参照。

グラフ全体の一般的な配色はcolor scheme プロパティで制御され、系列の色はtheme プロパティで制御されます。配色が明示的に設定されていない場合は、デスクトップのテーマ設定（Light/Dark）に従います。

列挙

Qt Graphs 2D では、すべての列挙型はスコープされた列挙型として実装されています。例えば、Qt Charts のPieSlice.LabelOutside に対して、Qt Graphs 2D の対応する列挙型はPieSlice.LabelPosition.Outside です。

QML におけるチャート系列の移行

このセクションでは、Qt Charts のコードを、Qt Graphs 2D に移行する方法を説明します。

エリアシリーズの移行

これらのコードサンプルは同様のチャートを実装しています：

Qt Charts の場合

ChartView {
    anchors.fill: parent
    ValueAxis {
        id: valueAxisX
        max: 8
    }

    ValueAxis {
        id: valueAxisY
        max: 4
    }

    AreaSeries {
        axisX: valueAxisX
        axisY: valueAxisY
        upperSeries: LineSeries {
            XYPoint { x: 0; y: 2 }
            XYPoint { x: 1; y: 3.5 }
            XYPoint { x: 2; y: 3.8 }
        }
        lowerSeries: LineSeries {
            XYPoint { x: 0.4; y: 1.5 }
            XYPoint { x: 1; y: 2.5 }
            XYPoint { x: 2.4; y: 3 }
        }
    }
}

Qt Graphs ：

GraphsView {
    anchors.fill: parent
    axisX: ValueAxis {
        id: xAxis
        max: 8
        tickInterval: 2.0
    }

    axisY: ValueAxis {
        id: yAxis
        max: 4
        tickInterval: 1.0
    }

    AreaSeries {
        upperSeries: LineSeries {
            XYPoint { x: 0; y: 2 }
            XYPoint { x: 1; y: 3.5 }
            XYPoint { x: 2; y: 3.8 }
        }

        lowerSeries: LineSeries {
            XYPoint { x: 0.4; y: 1.5 }
            XYPoint { x: 1; y: 2.5 }
            XYPoint { x: 2.4; y: 3 }
        }
    }
}

棒グラフの移行

Qt Charts ：

import QtQuick
import QtCharts

ChartView {
    BarSeries {
        id: mySeries
        axisX: BarCategoryAxis { categories: ["2007", "2008", "2009", "2010", "2011", "2012" ] }
        BarSet { label: "Bob"; values: [2, 2, 3, 4, 5, 6] }
        BarSet { label: "Susan"; values: [5, 1, 2, 4, 1, 7] }
        BarSet { label: "James"; values: [3, 5, 8, 13, 5, 8] }
    }
}

Qt Graphs ：

GraphsView {
    axisX: BarCategoryAxis { categories: ["2007", "2008", "2009", "2010", "2011", "2012" ] }

    BarSeries {
        id: mySeries
        BarSet { label: "Bob"; values: [2, 2, 3, 4, 5, 6] }
        BarSet { label: "Susan"; values: [5, 1, 2, 4, 1, 7] }
        BarSet { label: "James"; values: [3, 5, 8, 13, 5, 8] }
    }
}

マイグレーションドーナツシリーズ

Qt Charts と

import QtQuick
import QtCharts

ChartView {
    PieSeries {
        id: pieOuter
        size: 0.96
        holeSize: 0.7
        PieSlice { id: slice; label: "Alpha"; value: 19511; color: "#99CA53" }
        PieSlice { label: "Epsilon"; value: 11105; color: "#209FDF" }
        PieSlice { label: "Psi"; value: 9352; color: "#F6A625" }
    }

    PieSeries {
        id: pieInner
        size: 0.7
        holeSize: 0.25

        PieSlice { label: "Materials"; value: 10334; color: "#B9DB8A" }
        PieSlice { label: "Employee"; value: 3066; color: "#DCEDC4" }
        PieSlice { label: "Logistics"; value: 6111; color: "#F3F9EB" }

        PieSlice { label: "Materials"; value: 7371; color: "#63BCE9" }
        PieSlice { label: "Employee"; value: 2443; color: "#A6D9F2" }
        PieSlice { label: "Logistics"; value: 1291; color: "#E9F5FC" }

        PieSlice { label: "Materials"; value: 4022; color: "#F9C36C" }
        PieSlice { label: "Employee"; value: 3998; color: "#FCE1B6" }
        PieSlice { label: "Logistics"; value: 1332; color: "#FEF5E7" }
    }

    Component.onCompleted: {
        // Set the common slice properties dynamically for convenience
        for (var i = 0; i < pieOuter.count; i++) {
            pieOuter.at(i).labelPosition = PieSlice.LabelOutside;
            pieOuter.at(i).labelVisible = true;
            pieOuter.at(i).borderWidth = 3;
        }
        for (var i = 0; i < pieInner.count; i++) {
            pieInner.at(i).labelPosition = PieSlice.LabelInsideNormal;
            pieInner.at(i).labelVisible = true;
            pieInner.at(i).borderWidth = 2;
        }
    }
}

Qt Graphs 付き

GraphsView {
    PieSeries {
        id: pieOuter
        pieSize: 0.96
        holeSize: 0.7
        PieSlice { id: slice; label: "Alpha"; value: 19511; color: "#99CA53" }
        PieSlice { label: "Epsilon"; value: 11105; color: "#209FDF" }
        PieSlice { label: "Psi"; value: 9352; color: "#F6A625" }
    }

    PieSeries {
        id: pieInner
        pieSize: 0.7
        holeSize: 0.25

        PieSlice { label: "Materials"; value: 10334; color: "#B9DB8A" }
        PieSlice { label: "Employee"; value: 3066; color: "#DCEDC4" }
        PieSlice { label: "Logistics"; value: 6111; color: "#F3F9EB" }

        PieSlice { label: "Materials"; value: 7371; color: "#63BCE9" }
        PieSlice { label: "Employee"; value: 2443; color: "#A6D9F2" }
        PieSlice { label: "Logistics"; value: 1291; color: "#E9F5FC" }

        PieSlice { label: "Materials"; value: 4022; color: "#F9C36C" }
        PieSlice { label: "Employee"; value: 3998; color: "#FCE1B6" }
        PieSlice { label: "Logistics"; value: 1332; color: "#FEF5E7" }
    }

    Component.onCompleted: {
        // Set the common slice properties dynamically for convenience
        for (var i = 0; i < pieOuter.count; i++) {
            pieOuter.at(i).labelPosition = PieSlice.LabelPosition.Outside;
            pieOuter.at(i).labelVisible = true;
            pieOuter.at(i).borderWidth = 3;
        }
        for (var i = 0; i < pieInner.count; i++) {
            pieInner.at(i).labelPosition = PieSlice.LabelPosition.InsideNormal;
            pieInner.at(i).labelVisible = true;
            pieInner.at(i).borderWidth = 2;
        }
    }
}

マイグレーションラインシリーズ

WithQt Charts

ChartView {
    LineSeries {
        XYPoint { x: 0; y: 0 }
        XYPoint { x: 1.1; y: 2.1 }
        XYPoint { x: 1.9; y: 3.3 }
        XYPoint { x: 2.1; y: 2.1 }
        XYPoint { x: 2.9; y: 4.9 }
        XYPoint { x: 3.4; y: 3.0 }
        XYPoint { x: 4.1; y: 3.3 }
    }
}

Qt Graphs ：

GraphsView {
    // Graphs don't calculate a visible range for axes.
    // You should define the visible range explicitly.
    axisX: ValueAxis {
        id: xAxis
        max: 4.1
    }
    axisY: ValueAxis {
        id: yAxis
        max: 4.9
    }

    LineSeries {
        XYPoint { x: 0; y: 0 }
        XYPoint { x: 1.1; y: 2.1 }
        XYPoint { x: 1.9; y: 3.3 }
        XYPoint { x: 2.1; y: 2.1 }
        XYPoint { x: 2.9; y: 4.9 }
        XYPoint { x: 3.4; y: 3.0 }
        XYPoint { x: 4.1; y: 3.3 }
    }
}

移行パイシリーズ

WithQt Charts ：

ChartView {
    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: {
        othersSlice = pieSeries.append("Others", 52.0);
        pieSeries.find("Volkswagen").exploded = true;
    }
}

WithQt Graphs ：

GraphsView {
    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: {
        othersSlice = pieSeries.append("Others", 52.0);
        pieSeries.find("Volkswagen").exploded = true;
    }
}

散布図シリーズの移行

WithQt Charts ：

ChartView {
    ScatterSeries {
        XYPoint { x: 1.5; y: 1.5 }
        XYPoint { x: 1.5; y: 1.6 }
        XYPoint { x: 1.57; y: 1.55 }
        XYPoint { x: 1.8; y: 1.8 }
        XYPoint { x: 1.9; y: 1.6 }
        XYPoint { x: 2.1; y: 1.3 }
        XYPoint { x: 2.5; y: 2.1 }
    }
}

Qt Graphs を使用：

GraphsView {
    // Graphs don't calculate a visible range for axes.
    // You should define the visible range explicitly.
    ValueAxis {
        id: xyAxis
        min: 1.3
        max: 2.5
    }
    axisX: xyAxis
    axisY: xyAxis

    ScatterSeries {
        XYPoint { x: 1.5; y: 1.5 }
        XYPoint { x: 1.5; y: 1.6 }
        XYPoint { x: 1.57; y: 1.55 }
        XYPoint { x: 1.8; y: 1.8 }
        XYPoint { x: 1.9; y: 1.6 }
        XYPoint { x: 2.1; y: 1.3 }
        XYPoint { x: 2.5; y: 2.1 }
    }
}

スプライン系列の移行

Qt Charts を使用

ChartView {
    SplineSeries {
        name: "Spline"
        XYPoint { x: 0; y: 0.0 }
        XYPoint { x: 1.1; y: 3.2 }
        XYPoint { x: 1.9; y: 2.4 }
        XYPoint { x: 2.1; y: 2.1 }
        XYPoint { x: 2.9; y: 2.6 }
        XYPoint { x: 3.4; y: 2.3 }
        XYPoint { x: 4.1; y: 3.1 }
    }
}

Qt Graphs を使用：

GraphsView {
    ValueAxis {
        id: xyAxis
        max: 5
    }
    axisX: xyAxis
    axisY: xyAxis
    SplineSeries {
        XYPoint { x: 0; y: 0.0 }
        XYPoint { x: 1.1; y: 3.2 }
        XYPoint { x: 1.9; y: 2.4 }
        XYPoint { x: 2.1; y: 2.1 }
        XYPoint { x: 2.9; y: 2.6 }
        XYPoint { x: 3.4; y: 2.3 }
        XYPoint { x: 4.1; y: 3.1 }
    }
}

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