Qt Charts 概要

Qt Charts は、スタイリッシュでインタラクティブ、かつデータ中心のユーザーインターフェースの作成を可能にします。Qt Charts は、統合を容易にするためにGraphics View Frameworkを使用しています。チャートコンポーネントは、QWidget またはQGraphicsWidget オブジェクト、あるいはQMLタイプとして使用できます。

QChartクラスは、さまざまな種類の系列や、凡例や軸などのその他のチャート関連オブジェクトのグラフィカルな表現を管理します。QChartは、QGraphicsScene 内に表示できるQGraphicsWidget です。より簡単な解決策として、QChartの代わりに利便性クラスであるQChartViewを使用して、レイアウト内にチャートを表示することもできます。 QMLでは、ChartView型を使用してチャートを表示します。

一部のチャートコンポーネントは、QChartクラスの特殊化であるQPolarChartクラス、またはChartView型の特殊化であるPolarChartView QML型を使用することで、極座標チャートとして表示することもできます。

チャートの外観は、テーマの使用、色やプロパティの変更、チャートコンポーネントの非表示、またはチャートのアニメーション化によってカスタマイズできます。

モデルマッパーを使用すると、QAbstractItemModel クラスから派生したデータモデルをチャートのデータソースとして使用することができます。モデルマッパーには、水平型と垂直型があります。

チャートの種類

Qt Charts モジュールでは、以下のチャートタイプが提供されています:

• 折れ線グラフおよびスプライングラフ
• 面グラフおよび散布図
• 棒グラフ
• 円グラフ
• 箱ひげ図
• ローソク足チャート
• 極座標グラフ

各チャートタイプは、QML において QAbstractSeries を継承したクラス、または AbstractSeries を継承した型によって表現されます。チャートは、シリーズクラスのインスタンスを作成し、それを QChart または ChartView のインスタンスに追加することで作成されます。

例：

QLineSeries* series = new QLineSeries();
series->add(0, 6);
series->add(2, 4);
...
chartView->chart()->addSeries(series);
chartView->chart()->createDefaultAxes();

あるいは、QMLでは：

ChartView {
    id: chart
    title: "Top-5 car brand shares in Finland"
    anchors.fill: parent
    legend.alignment: Qt.AlignBottom
    antialiasing: true

    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: {
        // You can also manipulate slices dynamically, like append a slice or set a slice exploded
        othersSlice = pieSeries.append("Others", 52.0);
        pieSeries.find("Volkswagen").exploded = true;
    }
}

import QtQuick

1つのチャートに異なる種類のシリーズを組み合わせることができます。

折れ線グラフとスプライングラフ

線グラフとスプライングラフは、データポイントを線で結んだ一連のデータとしてデータを表示します。線グラフではデータポイントは直線で結ばれますが、スプライングラフではスプラインで結ばれます。スプラインは、QPainterPath を使用して描画されます。

折れ線グラフは、QLineSeries クラスまたは LineSeries QML 型を使用して実装されます。

スプラインチャートは、QLineSeries を継承する QSplineSeries クラス、または LineSeries を継承する SplineSeries タイプを使用して実装されます。

詳細については、「折れ線グラフの作成」および「スプライングラフの作成」を参照してください。折れ線グラフと棒グラフを組み合わせ、両方に共通の軸を使用する例については、「折れ線グラフと棒グラフの組み合わせ」を参照してください。

面図と散布図

面積グラフは、2 本の線で囲まれた領域としてデータを表示するのに対し、散布図は点の集合としてデータを表示します。

エリアチャートは、QAreaSeries クラスまたは AreaSeries QML タイプを使用して実装されます。デフォルトでは、x 軸が一方の境界として使用され、QLineSeries または LineSeries がもう一方の境界として使用されます。ただし、両方の境界として QLineSeries または LineSeries を使用することも可能です。

散布図は、QScatterSeries クラスまたは ScatterSeries QML タイプを使用して実装します。

詳細については、「面積グラフの作成」および「散布図の作成」を参照してください。

棒グラフ

棒グラフは、カテゴリごとにグループ化された水平または垂直の棒としてデータを表示します。QBarSet クラスおよび BarSet QML タイプは、棒グラフ内の 1 組の棒を表します。 QAbstractBarSeries クラスは、すべての棒グラフシリーズクラスの抽象親クラスであり、AbstractBarSeries 型は棒グラフシリーズ型の親型です。シリーズ型によって、データの表示方法が決まります。

QBarSeries クラスおよび BarSeries QML 型は、カテゴリごとにグループ化された縦棒としてデータを表示します。同様に、QHorizontalBarSeries クラスおよび HorizontalBarSeries QML 型は、横棒としてデータを表示します。

QStackedBarSeries クラスおよび StackedBarSeries QML 型は、カテゴリごとに 1 本の棒グラフを縦に積み重ねた形でデータ系列を表示します。これに対応する水平方向のクラスおよび型は、それぞれ QHorizontalStackedBarSeries および HorizontalStackedBarSeries です。

QPercentBarSeries クラスおよび PercentBarSeries QML タイプは、カテゴリ別に分類された一連のデータを、各カテゴリの割合として表示します。これに対応する水平方向のクラスおよびタイプは、それぞれ QHorizontalPercentBarSeries および HorizontalPercentBarSeries です。

詳細については、「棒グラフの作成」、「水平積み上げ棒グラフの作成」、「水平棒グラフの作成」、および「水平パーセント棒グラフの作成」を参照してください。

円グラフ

円グラフは、データを円グラフのスライスで構成される円として表示します。円グラフは QPieSeries クラスまたは PieSeries QML タイプを使用して実装され、円グラフのスライスは QPieSlice クラスまたは PieSlice QML タイプを使用して追加されます。

0.0 から 1.0 の間の穴のサイズを指定することで、円グラフをドーナツグラフに変えることができます。

詳細については、「ウィジェットを使用したグラフのギャラリー」、「ドーナツ型内訳グラフの作成」、および「ネストされたドーナツ型グラフの作成」を参照してください。

箱ひげ図

箱ひげ図は、四分位点を基点として、値のばらつきを示すひげを延長した形でデータを表現します。 ボックスプロット・シリーズの項目は、バー・シリーズのバー・セットと同様に、カテゴリごとにグループ化されます。各ボックス・アンド・ウィスカーの項目について、下限値、下四分位値、中央値、上四分位値、および上限値が指定されます。

箱ひげ図は、QBoxPlotSeries および QBoxSet クラス、あるいは BoxPlotSeries および BoxSet QML タイプを使用して実装されます。

詳細については、「箱ひげ図の作成」を参照してください。

ローソク足チャート

ローソク足チャートは、一連のデータをローソク足として表示します。

ローソク足チャートは、QCandlestickSeries および QCandlestickSet クラス、あるいは CandlestickSeries および CandlestickSet QML タイプを使用して実装されます。

極座標グラフ

極座標グラフは、データを円形のグラフで表示します。データの配置は、グラフの中心である極からの角度と距離に基づいて行われます。

QPolarChart クラスは、QChart クラスの特殊化です。このクラスは、線、スプライン、面、散布図の各シリーズ、およびそれらでサポートされているすべての軸タイプに対応しています。軸は、放射状軸または角度軸として使用できます。QML では、対応するタイプは PolarChartView です。

詳細については、「極座標グラフの作成」および「QML での極座標グラフの使用」を参照してください。

軸

Qt Charts は、以下の軸タイプをサポートしています：

• 値軸
• カテゴリ軸
• 棒グラフのカテゴリ軸
• 日時軸
• 対数値軸

軸は、目盛り、グリッド線、および陰影付きの線を表示するように設定できます。軸上の値は、目盛りの位置に描画されます。すべての軸タイプは、QAbstractAxis クラスまたは AbstractAxis QML タイプの特殊化です。

値軸は、チャートの軸に実数値を追加します。これは、QValueAxis クラスまたは ValueAxis QML タイプを使用して実装されます。

カテゴリ軸は、QCategoryAxis クラスまたは CategoryAxis QML タイプを使用して実装されます。これには名前付き範囲と調整可能な範囲幅があります。

バーカテゴリ軸はカテゴリ軸と似ていますが、すべての範囲で範囲幅が同じです。バーカテゴリ軸は、QBarCategoryAxis クラスまたは BarCategoryAxis QML タイプを使用して実装されます。

日時軸は、チャートの軸に日付と時刻を追加します。これは、QDateTimeAxis クラスまたは DateTimeAxis QML タイプを使用して実装されます。

対数軸は、チャートの軸に対数スケールを追加します。対数スケールは、桁数に基づく非線形スケールであり、軸上の各目盛は、前の目盛に特定の値を乗じたものとなります。 対数軸は、QLogValueAxis クラスまたは LogValueAxis QML タイプを使用して実装されます。

1 つのチャートに対して複数の軸を定義できます。軸は、チャートの下、上、左、または右に配置できます。さらに、軸の種類を異なるものに設定することも可能です。ただし、異なる定義域となるような軸の種類の混在はサポートされていません。たとえば、同じ向きに QValueAxis と QLogValueAxis を指定することはできません。

詳細については、「日付および時刻軸を使用した折れ線グラフ」、「対数値軸の使用」、「複数の軸の使用」、および「QML での軸の使用」を参照してください。

凡例

凡例は、チャートの凡例を表示するグラフィックオブジェクトです。凡例オブジェクトを作成または削除することはできませんが、QChart クラスまたは ChartView QML タイプを介して参照することは可能です。凡例の状態は、系列が変更された際に QChart または ChartView によって更新されます。

凡例は、チャートの下や上、あるいは左や右に配置することができます。デフォルトでは、凡例はチャートビューに固定されていますが、切り離して自由に移動できる個別のグラフィックアイテムにすることも可能です。

凡例内の個々のマーカー、あるいは凡例全体を非表示にすることが可能です。

凡例マーカーは、基底クラスである QLegendMarker および各シリーズタイプに対応するサブクラス（QAreaLegendMarker、QBarLegendMarker、QBoxPlotLegendMarker、QCandlestickLegendMarker、QXYLegendMarker）を使用して変更できます。

QML では、「レジェンドのカスタマイズ」の例に示されているように、カスタムレジェンドを作成することでレジェンドマーカーを変更することができます。

チャートとの対話

エンドユーザーは、チャートに動的に値を追加したり、データをドリルダウンしたり、チャートの拡大・縮小を行ったり、チャートをスクロールしたり、チャート内の項目をクリックしたり、マウスをその項目にホバーさせたりすることで、チャートと対話することができます。

データの動的な描画

チャートにデータを動的に追加し、新しいデータを表示するためにチャートビューを自動的にスクロールさせることも可能です。

詳細については、「スプラインチャートの作成」を参照してください。

データのドリルダウン

ドリルダウン効果は、たとえば棒グラフや円グラフに実装できます。ユーザーがグラフ内の項目を選択すると、その項目のより詳細なビューが表示されます。これは、最初の系列を削除し、別の系列を追加することで実装されます。

詳細については、「ドリルダウンの実装」を参照してください。

ズームとスクロール

ユーザーはキーボードを使用してズームやスクロールを行うことができます。矢印キーでチャートをスクロールし、プラスキーとマイナスキーでチャートを拡大または縮小できます。さらに、QRubberBand を使用して、ズームする領域を選択することもできます。

タッチデバイスでは、ジェスチャーを使用してパンやズームを行うことができます。

詳細については、「ズームラインの例」を参照してください。

クリックとホバー

エンドユーザーがチャート内の項目をクリックしたり、マウスをその上にホバーしたりした際に発せられるシグナルに、スロットを接続できます。これにより、コールアウトなどの要素をチャートに追加することが可能になります。

詳細については、「チャート上にコールアウトを描画する」を参照してください。

テーマ

テーマとは、シリーズの色、ペン、ブラシ、フォント、軸、タイトル、凡例など、チャートのすべての視覚的要素に適用される、UI スタイル関連の設定の組み込みコレクションです。

Qt Charts には、以下の定義済みテーマが用意されています：

• Light テーマ（デフォルトのテーマ）
• セルリアンブルーテーマ
• ダークテーマ
• サンドブラウン・テーマ
• ナチュラルカラーシステム（NCS）ブルーテーマ
• 高コントラストテーマ
• アイシーブルーのテーマ
• Qtテーマ

テーマは、色、ペン、ブラシ、フォントを変更することでカスタマイズできます。Qt Charts のソースコードを修正することで、新しいテーマを追加できます。

詳細については、「テーマを使用したチャートの作成」を参照してください。