Qt Data Visualization

Qt Data Visualization と Qt Charts
デスクトップ向けの 3D データ可視化と 2D チャート表示
杉田研治
株式会社 SRA プログラマ
自己紹介
略歴
•
Unix
プログラミングを始める
(1980∼)
•
GUI
プログラミングを始める
(1986∼)
•
X
Window
System
プログラミングを始める
(1986∼)
•
Qt
に出会う
(1996)
•
Qt
を開発に使用
(1999∼2000)
•
Qt
関連サービスを始める
(2002∼)
•
株式会社 SRA 勤務 (1980∼)
3
著作、翻訳、記事
•
オライリー・ジャパン (2014/4)
•入門 Qt 4 プログラミング (翻訳)
オライリー・ジャパン (2007/11)
•Qt GUI プログラミング (翻訳)
ソフトバンククリエイティブ (2005/7)
•KDE プログラミングパーフェクトガイド
技術評論社 (2001/10)
•Qt で始める X プログラミング
技術評論社 (2000/1)
Software
Design、gihyo.jp、UNIX
User、C
Magazine、Interface、bit
などで記事
(1987/5∼)
•
実践 Qt 4 プログラミング (翻訳)
4
はじめに
説明内容
Qt Data Visualization
Qt Charts
• 特徴
• データ操作、データ選択
• いろいろな種類のチャート
軸の種類と凡例
•
• 対話操作、外観と操作感
• インストールと使い方
と対話操作
•
シーンとアイテムのカス
タマイズ
• インストールと使い方
6
3D データ可視化と 2D チャート表示
• データ可視化に Qt Data Visualization と Qt Charts を提供
• 両者に共通の設計方針
対話的なデータ指向ユーザーインターフェイス作成
•
外観と操作感や機能の高いカスタマイズ性
•
• C++とQML の両方で使用可能
• 商用ライセンスユーザに無償提供
7
Qt Data Visualization の概要
• Qt 5 で利用でき OpenGL のハードウェアアクセラレーショ
ンと Qt Quick 2 を最大限に有効利用
• 奥行き距離情報と大量データ(例、複数センサーからの取得
データ)の可視化に有用
• 簡潔にデータ表示でき効果的な見栄え
• 対話操作と 2D 表示を併用した強力なツール
• C++ とQt Quick 2 の両方で使用可能
Qt 5.2 以降で動作
8
Qt Charts の概要
• 折れ線、スプライン、エリア、散布、円、
棒、箱ひげ図、極座標チャートなどをき
れいにかつ使いやすい API で作成可能
• Qt 5 と Qt 4.8 で動作
• C++ と Qt Quick、Qt Quick 2 で利用可能
• Graphics View フレームワークで実装
Qt 5.4 以降では Qt Quick 2 で動作
Qt 5.3 以前と Qt 4.8 では Qt Quick 1.4 で動作
9
Qt Data Visualization
特徴
特徴
• 多くのデータ可視化オプション − 3D 棒、3D 散布や 3D 面
• 3D データの断面表示
• 対話的なデータ表示 − 回転、拡大縮小、マウスまたはタッチで強調表示
• OpenGL でデータを描画
• C++ と Qt Quick 2 で利用可能
• データ軸のカスタマイズ − データ表示範囲と軸範囲の制御
• 入力ハンドラのカスタマイズ
• テーマのカスタマイズ
• アイテムとラベルのカスタマイズ
• 既定義データプロクシー − Qt のアイテムモデルと高低マップからデータを可視化
• 透視投影と正射投影
• 体積アイテムのカスタマイズ
12
多様な可視化表示
3D 棒表示
3D 面表示
3D 散布表示
棒、アイテム、面メッシュ型、テーマ、セレクションモデルを変更可能
13
3D データの断面表示
14
OpenGL でデータを描画
• OpenGL 2.1 以降の利用を推奨
• OpenGL ES2 では機能に制限あり
QML
では描画モードで描画速度と描画品質を調整
•
• Qt Quick 2 では OpenGL を
最大限に有効利用
15
データ軸のカスタマイズ
•
データ表示範囲と軸範囲の制御
16
入力ハンドラのカスタマイズ
• 基本的な入力ハンドラではマウスやタッチ、ジェスチャー操作を処理
• カスタム入力ハンドラを使うためにはデフォルト入力ハンドラを無効
にしなければならない
• QML では MouseArea を用意しイベント
を捉えて処理する
• C++ では QAbstract3DInputHandler や
Q3DInputHandler をサブクラス化し必要な
メソッドを再定義する。
17
テーマのカスタマイズ
• Q3DTheme は既定義テーマから作成可能
Qt、Primary Colors、Digita、Stone Moss、
ArmyBlue、Retro、Ebony、Isabelle
18
テーマのカスタマイズ
• 一から作り上げるか既定義テーマの色やグラデーション、光源などを変
更して作成
• 複数系列では系列毎にテーマ要素を定義可能
19
アイテムとラベルのカスタマイズ
• 独自なアイテムとラベルをグラフに追加可能
• アイテムは独自なメッシュや位置、スケール、回転角、オプションテクスチャーを保持可能
• ラベルにはテキストやフォント、位置、スケール、回転角、色などを設定可能
20
既定義データプロクシー
• 既定義データプロクシーによりQt のアイテムモデルと高低マップをデータ可視化可能
• QItemModelSurfaceDataProxy で QAbstractItemModel 派生モデルを面グラフで可視化
• QHeightMapSurfaceDataProxy で高低マップで面プロットして可視化
• QSurfaceDataProxy で 3D 系列を面プロットして可視化
21
透視投影と正射投影
•
•
•
透視投影と正射投影を随時選択可能
投影はグラフの orthoProjection プロパティで制御可能
正射投影はグラフの 2D 表示に使用可能 22
体積アイテムのカスタマイズ
• 体積データの表示にカスタム体積アイテムを定義可能
• 体積描画オブジェクトは 3D テクスチャー付き立方体
• 立方体の主軸に沿った 3 断面をサポート
• 正射投影のみをサポート
23
データの操作、データ選択と対話操作
データ操作
• データプロクシーを使い所定の形式でグラフにデータを投入 (下記コード例)。
• よく使われる用途には QItemModelBarDataProxy や QItemModelScatterDataProxy など
の専用既定義プロクシーを提供。アイテムモデルプロクシーはアイテムモデルに保持
されたデータを受け取り、決められた対応関係に従って所定の形式と対応付ける。
Q3DBars graph;
QBarDataProxy *barProxy = new QBarDataProxy;
QBarDataArray *dataArray = new QBarDataArray;
dataArray->reserve(10);
for (int i = 0; i < 10; i++) {
QBarDataRow *dataRow = new QBarDataRow(5);
for (int j = 0; j < 5; j++)
(*dataRow)[j].setValue(myData->getValue(i, j));
dataArray->append(dataRow);
}
barProxy->resetArray(dataArray);
graph->addSeries(new QBar3DSeries(barProxy));
25
データ選択と対話操作
• マウス操作とタッチ操作で回転や拡大縮小
• 単一データアイテムの選択 − 棒グラフの棒や散布図のアイテム、面頂点 26
データ選択と対話処理
• 棒グラフでの行と列の選択
• 棒グラフと面グラフでの
切断面の選択
27
シーンとアイテムのカスタマイズ
シーンのカスタマイズ
• 3D シーンは単一の有効なカメラとそのカメラと結合したの単一の
有効な光源で構成されている
• カメラに設定済みの回転角と縮尺値はカスタマイズ可能
29
アイテムのカスタマイズ
• 棒グラフの棒やアイテム、面の既定義メッシュ
• ユーザ定義カスタムメッシュ
• 四元数 (クォータニオン) の回転によるアイテムの回転
30
インストールと使い方
Qt Data Visualization モジュールのインストール
•
•
Qt インストーラーで Qt Data Visualization モジュールをインストール
•
ソースコードはインストール先ディレクトリ
インストール後には Qt Data Visualization のドキュメントとサンプルプ
ログラムが Qt Creator や qmakeで利用可能
の EnterpriseAddOns/ → QtDataVisualization/
にインストールされる
•
サンプルコードは Examples/ →
QtDataVisualization/ にインストールされる
32
アプリケーションでの Qt Data Visualization モジュールの使用方法
•
•
•
ヘッダーのインクルードとリンクのために .pro ファイルに以下の記述を
追加
QT += datavisualization
C++ のクラスでモジュールを使うには以下のようにヘッダーをインクル
ードし using 句を記述
#include <QtDataVisualization>
using namespace QtDataVisualization
以下の文で Qt Data Visualization の QML タイプをインポート
import QtDataVisualization 1.2
33
Qt Charts
いろいろな種類のチャート
折れ線グラフとスプライングラフ
•
•
折れ線グラフはデータポイント系列を直線で結んで情報を表示
スプライングラフはデータポイント系列をスプラインで結んで
情報を表示
36
エリアチャートと散布図
• エリアチャートは 2 組の境界線で囲まれた領域を塗りつぶしてデータを表現
• デフォルトでは X 軸上の境界線と QLineSeries
• 共に QLineSeries にすることも可能
• 散布図は点の集まりでデータを表現
37
棒グラフ
• データ系列を棒で表示
• 各分類中のものは束ねてグループ化
• 縦、横、積み重ね、百分率
38
円グラフ
• 円を扇型で分割してデータを表現
• 標準の円グラフとドーナッツ型円グラフ
39
極座標グラフ
• いくつかのチャートを極座標グラフで表示
• 線、スプライン、エリア、散布の各系列を利用可能
• 上記系列の全ての軸の種類を利用可能
40
箱ひげ図
• 細長い箱とその両側に出たひげでデータ系列を表現
• 系列中の各アイテムは同一分類で描画される
• 複数系列の場合には系列の同一インデックスのアイテムは同じ枠内に描画される
41
軸の種類と凡例
軸の種類
• 値軸 − qreal 値
• 分類軸 − 名前付き範囲、範囲幅調整可能
• 棒分類軸 − 名前付き範囲
• 時間軸 − QDateTime 値
• 対数軸 − 対数値
43
凡例
• デフォルトで QChart が自動表示
• データ系列変更時に更新される
• QChart を介して凡例オブジェクトを参照可能
• 背景、枠などの変更やマーカーへのアクセス
44
対話操作、外観と操作感
対話操作
• 動的なデータ描画 − Dynamic Spline Example
• ドリルダウン機能 − Piechart Drilldown Example、
StackedBarChart Drilldown Example
•
• スクロール機能 − Zoom Line Example
• clicked と hover シグナル − Callout Example
拡大縮小機能 − Zoom Line Example
46
外観と操作感
• 既定義テーマ
• 色と属性の変更
要素の表示/非表示選択
•
• アニメーション
47
インストールと使いかた
Qt Charts モジュールのインストール
•
•
Qt インストーラーで Qt Charts モジュールをインストール
•
ソースコードはインストール先ディレクトリ
インストール後には Qt Charts のドキュメントとサンプルプログラムが Qt
Creator や qmakeで利用可能
の EnterpriseAddOns/ → Charts/ にインストー
ルされる
•
サンプルコードは Examples/ → Charts に
インスールされる
49
アプリケーションでの Qt Charts モジュールの使用方法
•
ヘッダーのインクルードとリンクのために .pro ファイルに以下の記述を追加
QT += charts
•
C++ のクラスでモジュールを使うには以下のようにヘッダーをインクルードしマクロを記述
#include <QChartView>
#include <QBarseries>
#include <QBarSet>
#include <QLegend>
#include <QBarCategoryAxis>
QT_CHARTS_USE_NAMESPACE
•
以下の文で Qt Charts の QML タイプをインポート
import QtCharts 2.0
50
さいごに
まとめ
• 2D チャート − Qt 4 と Qt 5 用
• 3D データ可視化 − Qt 5 用、要 OpenGL ハードウェアアクセラレーション
• 2D と 3D 共に C++ と QML の API を利用可能
• いろいろな種類のグラフやチャートと軸を利用可能
• 対話操作
• 外観と操作感のカスタマイズ
• オンラインドキュメント
http://doc.qt.io/QtCharts/
http://doc.qt.io/QtDataVisualization/
52
今後
•
•
レーダーチャートの要望が多い
•
•
最初のリリースから予定にあるがまだ未リリースされていない
QCharts.js (QML Bindings for Charts.js) で代用
•
最初の描画は Qt Charts より速いが、再描画が Qt Charts より遅いので頻繁
な更新に注意
•
系列データが JavaScript データのためアクセスが煩雑で解りにくいコードにな
る、Qt Charts の方が系列データを扱いやすい
等高線の要望がある
•
Qwt の QwtPlotSpectrogram の ContourMode や他の等高線をサポートするライ
ブラリを使用
53
ありがとうございました