チャートの概要
チャートパッケージは、データの視覚化の機能を提供するクラスの階層から成り立っています。これらには、シリーズ、アクシス、インタラクション、マーカーとレジェンドを実装するメカニズムなどが含まれます。このガイドは、それぞれのクラスの間の関係や、各クラスにどんな機能が含まれているかを説明します。次のセクションからは、アクシス、シリーズ、インタラクションの説明をします。
Sencha Chart のインストール
Sencha Chart は、デフォルトで Ext JS ライブラリには含まれていません。チャートパッケージを含むためには、アプリケーションの app.json ファイルの requires ブロックに “sencha-charts” を追加して下さい。パッケージ名を requires ブロックに追加すると、アプリケーションでチャートパッケージが使用可能になります。
追加した後、アプリケーションをリビルドするようにして下さい。次のコマンドを実行すると、アプリケーションを手動でリビルドする事ができます。
sencha app build |
また、app watch を起動してもいいでしょう。
sencha app watch |
sencha app watch は、アプリケーションの資産を監視し、変更を検出した時に、リビルドします。
チャートコンポーネントのクラス
全てのタイプのチャートコンポーネントはそれぞれ
Ext.draw.Container
を継承した
AbstractChart クラスから派生します。
チャートコンポーネントは、シリーズとアクシスを管理するコンテナです。サイズが変更される度に、シリーズとアクシスのレイアウトをします。
抽象クラスの実装は、performLayout メソッドをオーバーライドする必要があります。
例えば、チャートは、アクシスの幅の変更に対応して、シリーズの面積を再計算する必要があります。
チャートの種類には 3つあります。
- cartesian/chart – 直交座標で値を配置するシリーズ向けのチャートを生成します。例えば、棒グラフ、エリアチャート、散布図、折れ線グラフなどがこの分野に入ります。
- polar – 極座標で値を配置するシリーズ向けのチャートを生成します。例えば、円グラフやレーダーグラフなどがこの分野に入ります。
- spacefilling – チャートのエリア全体を埋つくすチャートを生成します。
ext-charts では、シリーズの種類を評価して、自動的にチャートの種類を認識しようとします。このため、ユーザーは xtype を ‘chart’ に設定するだけで済みました。しかし、sencha-charts では、場合によっては、xtype の指定が必要な時もあります。
直交座標のグラフが最もよく使用されるので、そのエイリアスは ‘chart’ に割り当てられています。xtype を ‘chart’ に設定すると、棒グラフ、折れ線グラフ、散布図、エリアチャートを表示したいのだと推定します。他のチャートの種類を使いたい場合、xtype に ‘polar’ または ‘spacefilling’ を指定する必要があります。
Chart コンポーネントの管理
Chart コンポーネントは次の項目を管理します。
- Axes – これらは、
Ext.chart.axis.Axisを通してアクセスされ、視覚化のために定義され描画されるアクシスを全て表現します。これは MixedCollection です。 - Series – これは、
Ext.chart.series.Seriesを通してアクセスされ、チャートに描画される全てのシリーズを表現します。これは、線グラフ、棒グラフ、散布図などになります。また、これは MixedCollection です。 - Interactions – あるイベントが認識され時、シリーズやアクシスを直接操作するコントローラーです。
- Legend Store – これは、シリーズから収集したレジェンドの情報を表示します。通常は、このストアにデータのリストを追加し、レジェンドの情報が変更される度に自動的にアップデートされるように設定できます。
アクシス (Axis)
全てのアクシスの種類を表示するために、 Ext.chart.axis.Axis を提供されています。このアクシス オブジェクトは、ドッキングの位置によって、動作が異なります。
- left/right – アクシスは縦になります
- top/bottom – アクシスは横になります
アクシスがあると、データ値を座標にマッピングできます。表示する必要のあるデータの種類にバインドされます。
- numeric – このアクシスに連携されているデータは数値型で連続的です。
- time – このアクシスに連携されているデータ (または変換された後のデータ) は、日付と時間の値です — 連続的です。
- category – このアクシスに連携されているデータは、定型のセットに入っています。データポイントは、アクシスに分けられて配置されます。
アクシスのアクシスレイアウトやアクシスセグメンターを変更すると、アクシスの動作を簡単に変更できます。
シリーズ (Series)
シリーズは、抽象クラスで、Line シリーズ、Bar シリーズ、Schatter シリーズなどの視覚化の実装で拡張されます。
Series クラスそのものには、イベント管理、ハイライト、マーカー、ラベルなど、全てのシリーズにあるコードも含まれています。
次のセクションから、使用可能なシリーズの種類を説明します。また、Chart, Axis, Series オプションを含めた完全なシリーズのコンフィグのサンプルも表示します。詳しくは、Series のドキュメントをご覧ください。
エリアチャート (Aria)
Area シリーズは、積み上げ面グラフを生成し、通常これは複数の集計情報のレイヤーを表示するために使用されます。他のシリーズと同様、面積シリーズは、チャートの series コンフィグに追加される必要があります。
Aria シリーズや Bar シリーズのように積み上げるシリーズでは、複数の yFields を指定できます。 Area シリーズのよくあるコンフィグオブジェクトは、次のコードサンプルの様になります。
Ext.create('Ext.Container', { renderTo: Ext.getBody(), width:500, height:500, layout: 'fit', items: [ { xtype: 'chart', store: { fields: ['name', 'g1', 'g2'], data: [ {"name": "Item-0", "g1": 18.34,"g2": 0.04}, {"name": "Item-1", "g1": 2.67, "g2": 14.87}, {"name": "Item-2", "g1": 1.90, "g2": 5.72}, {"name": "Item-3", "g1": 21.37,"g2": 2.13}, {"name": "Item-4", "g1": 2.67, "g2": 8.53}, {"name": "Item-5", "g1": 18.22,"g2": 4.62}, {"name": "Item-6", "g1": 28.51, "g2": 12.43}, {"name": "Item-7", "g1": 34.43, "g2": 4.40}, {"name": "Item-8", "g1": 21.65, "g2": 13.87}, {"name": "Item-9", "g1": 12.98, "g2": 35.44}, {"name": "Item-10", "g1": 22.96, "g2": 38.70}, {"name": "Item-11", "g1": 0.49, "g2": 51.90}, {"name": "Item-12", "g1": 20.87, "g2": 62.07}, {"name": "Item-13", "g1": 25.10, "g2": 78.46}, {"name": "Item-14", "g1": 16.87, "g2": 56.80} ] }, interactions: { type: 'panzoom' }, legend: { docked: 'right' }, axes: [ { type: 'numeric', position: 'left', grid: true }, { type: 'category', position: 'bottom', visibleRange: [0, 0.4] } ], series: [ { type: 'area', xField: 'name', yField: ['g1', 'g2'], title: ['G1', 'G2'], style: { stroke: '#666666', fillOpacity: 0.8 } } ] } ] }); |
棒グラフ (Bar)
Bar シリーズは、積み上げや、グループ化ができる棒グラフを生成し、カテゴリに分けられた数値データの増減を表示するためによく使われます。古いチャートのパッケージと違って、Bar シリーズは、縦棒グラフも横棒グラフも表示できます。チャートに flipXY を設定すると、横の棒グラフになります。
Bar シリーズは積み上げあるいはグループ化ができます。シリーズをグループモードに切り替えるためには、シリーズの stack コンフィグを false に設定します。
次のサンプルは棒グラフを表示します。
Ext.create('Ext.Container', { renderTo: Ext.getBody(), width:500, height:500, layout: 'fit', items: [ { xtype: 'chart', flipXY: true, store: { fields: ['name', 'g1', 'g2'], data: [ {"name": "Item-0", "g1": 18.34,"g2": 0.04}, {"name": "Item-1", "g1": 2.67, "g2": 14.87}, {"name": "Item-2", "g1": 1.90, "g2": 5.72}, {"name": "Item-3", "g1": 21.37,"g2": 2.13}, {"name": "Item-4", "g1": 2.67, "g2": 8.53}, {"name": "Item-5", "g1": 18.22,"g2": 4.62}, {"name": "Item-6", "g1": 28.51, "g2": 12.43}, {"name": "Item-7", "g1": 34.43, "g2": 4.40}, {"name": "Item-8", "g1": 21.65, "g2": 13.87}, {"name": "Item-9", "g1": 12.98, "g2": 35.44}, {"name": "Item-10", "g1": 22.96, "g2": 38.70}, {"name": "Item-11", "g1": 0.49, "g2": 51.90}, {"name": "Item-12", "g1": 20.87, "g2": 62.07}, {"name": "Item-13", "g1": 25.10, "g2": 78.46}, {"name": "Item-14", "g1": 16.87, "g2": 56.80} ] }, // レジェンドのコンフィグ legend: { docked: 'right' }, // x と y のアクシスを定義 axes: [ { type: 'numeric', position: 'bottom', grid: true, minimum: 0 }, { type: 'category', position: 'left' } ], // 実際の Bar シリーズを定義 series: [ { type: 'bar', xField: 'name', yField: ['g1', 'g2'], axis: 'bottom', // 緑と青で塗りつぶすのを繰り返す // subStyle パラメータは、style パラメータをオーバーライドする subStyle: { fill: ["#115fa6", "#94ae0a"] } } ] } ] }); |
折れ線グラフ (Line)
Line シリーズは折れ線グラフを生成し、カテゴリに分けられた数値データの増減を表示する際の、棒グラフの代替となります。次のサンプルは、Line シリーズのよくあるコンフィグオブジェクトを示しています。
Ext.create('Ext.Container', { renderTo: Ext.getBody(), width:500, height:500, layout: 'fit', items: [ { xtype: 'chart', store: { fields: ['name', 'g1', 'g2'], data: [ {"name": "Item-0", "g1": 18.34,"g2": 0.04}, {"name": "Item-1", "g1": 2.67, "g2": 14.87}, {"name": "Item-2", "g1": 1.90, "g2": 5.72}, {"name": "Item-3", "g1": 21.37,"g2": 2.13}, {"name": "Item-4", "g1": 2.67, "g2": 8.53}, {"name": "Item-5", "g1": 18.22,"g2": 4.62}, {"name": "Item-6", "g1": 28.51, "g2": 12.43}, {"name": "Item-7", "g1": 34.43, "g2": 4.40}, {"name": "Item-8", "g1": 21.65, "g2": 13.87}, {"name": "Item-9", "g1": 12.98, "g2": 35.44}, {"name": "Item-10", "g1": 22.96, "g2": 38.70}, {"name": "Item-11", "g1": 0.49, "g2": 51.90}, {"name": "Item-12", "g1": 20.87, "g2": 62.07}, {"name": "Item-13", "g1": 25.10, "g2": 78.46}, {"name": "Item-14", "g1": 16.87, "g2": 56.80} ] }, interactions: ['panzoom'], legend: { docked: 'bottom' }, // x と y のアクシスを定義 axes: [ { type: 'numeric', position: 'left' }, { type: 'category', visibleRange: [0, 1], position: 'bottom' } ], // 実際のシリーズを定義 series: [{ type: 'line', xField: 'name', yField: 'g1', title: 'Normal', style: { fill: "#115fa6", stroke: "#115fa6", fillOpacity: 0.6, miterLimit: 3, lineCap: 'miter', lineWidth: 2 } }, { type: 'line', xField: 'name', yField: 'g2', title: 'Smooth', style: { smooth: true, stroke: "#94ae0a", fillOpacity: 0.6, miterLimit: 3, lineCap: 'miter', lineWidth: 2 } }] } ] }); |
円グラフ (Pie)
Pie シリーズは、円グラフを生成します。これは全体的でも意味がありながら、いくつの分野に対して量的な情報を表示する素晴らしい方法です。例えば、一年の12ヶ月に対する情報を表示するために最適です。
次のコードは、円グラフのサンプルです。
Ext.create('Ext.Container', { renderTo: Ext.getBody(), width: 500, height: 500, layout: 'fit', items: [ { xtype: 'polar', store: { fields: ['name', 'g1', 'g2'], data: [ {"name": "Item-0", "g1": 18.34,"g2": 0.04}, {"name": "Item-1", "g1": 2.67, "g2": 14.87}, {"name": "Item-2", "g1": 1.90, "g2": 5.72}, {"name": "Item-3", "g1": 21.37,"g2": 2.13}, {"name": "Item-4", "g1": 2.67, "g2": 8.53}, {"name": "Item-5", "g1": 18.22,"g2": 4.62} ] }, interactions: ['rotate'], // レジェンドの設定 legend: { docked: 'bottom' }, // 実際の Pie シリーズを定義 series: [ { type: 'pie', xField: 'g1', label: { field: 'name', display: 'rotate' }, donut: 25, style: { miterLimit: 10, lineCap: 'miter', lineWidth: 2 } } ] } ] }); |
レーダー (Radar)
Radar シリーズは、レーダーチャートを生成します。これは、限られた数の分野に対して、異なる量的な値の比較を表示する素晴らしい方法です。次のコードが、Radar シリーズのサンプルを表示します。
Ext.create('Ext.Container', { renderTo: Ext.getBody(), width:500, height:500, layout: 'fit', items: [ { xtype: 'polar', store: { fields: ['name', 'g1', 'g2'], data: [ {"name": "0", "g1": 18.34}, {"name": "1", "g1": 2.67}, {"name": "2", "g1": 1.90}, {"name": "3", "g1": 21.37}, {"name": "4", "g1": 2.67}, {"name": "5", "g1": 18.22}, {"name": "6", "g1": 28.51}, {"name": "7", "g1": 34.43}, {"name": "8", "g1": 21.65}, {"name": "9", "g1": 12.98}, {"name": "10", "g1": 22.96}, {"name": "11", "g1": 0.49}, {"name": "12", "g1": 20.87}, {"name": "13", "g1": 25.10}, {"name": "14", "g1": 16.87} ] }, // Set rotation interactions: ['rotate'], // Define radial and angular axis for the radar chart. axes: [ { type: 'numeric', position: 'radial', fields: 'g1', grid: true, label: { fill: 'black', y: -8 } }, { type: 'category', position: 'angular', fields: 'name', grid: true, label: { fill: 'black' } } ], series: [ { type: 'radar', xField: 'name', yField: 'g1' } ] } ] }); |
散布図 (Scatter)
Schatter シリーズは、散布図を生成します。これがあると、あなたのアプリケーションが一つの視覚化で二つ以上の変数を表示できるようになります。この変数は、x と y の座標と半径、サイズ、色などの要素のプロパティにも連携できます。
Ext.create('Ext.Container', { renderTo: Ext.getBody(), width:500, height:500, layout: 'fit', items: [ { xtype: 'cartesian', store: { fields: ['name', 'g1', 'g2'], data: [ {"name": "Item-0", "g1": 18.34,"g2": 0.04}, {"name": "Item-1", "g1": 2.67, "g2": 14.87}, {"name": "Item-2", "g1": 1.90, "g2": 5.72}, {"name": "Item-3", "g1": 21.37,"g2": 2.13}, {"name": "Item-4", "g1": 2.67, "g2": 8.53}, {"name": "Item-5", "g1": 18.22,"g2": 4.62}, {"name": "Item-6", "g1": 28.51, "g2": 12.43}, {"name": "Item-7", "g1": 34.43, "g2": 4.40}, {"name": "Item-8", "g1": 21.65, "g2": 13.87}, {"name": "Item-9", "g1": 12.98, "g2": 35.44}, {"name": "Item-10", "g1": 22.96, "g2": 38.70}, {"name": "Item-11", "g1": 0.49, "g2": 51.90}, {"name": "Item-12", "g1": 20.87, "g2": 62.07}, {"name": "Item-13", "g1": 25.10, "g2": 78.46}, {"name": "Item-14", "g1": 16.87, "g2": 56.80} ] }, axes: [{ type: 'numeric', position: 'bottom' },{ type: 'numeric', position: 'left' }], series: [ { type: 'scatter', xField: 'g1', yField: 'g2', marker: { radius: 4 }, highlight: { fillStyle: 'yellow', radius: 7, lineWidth: 2 }, } ] } ] }); |
ゲージ (Gauge)
Gauge シリーズは、ゲージグラフを生成します。これは、ある値の進行を表示するためによく使われます。Store を使うことに加え、Gauge シリーズの value に設定した値を表示させることもできます。
次のコードでサンプルを表示します：
Ext.create('Ext.Container', { renderTo: Ext.getBody(), width: 500, height: 500, layout: 'fit', items: [ { xtype: 'polar', series: [{ type: 'gauge', minimum: 100, maximum: 800, value: 400, donut: 30, colors: ["#115fa6", "lightgrey"] }] } ] }); |
インタラクション (Interaction)
このセクションは、Sencha Chart パッケージのインタラクション機能を紹介します。この機能を利用すると、ユーザーが複雑なデータセットを視覚化やナビゲーションができ、とてもインタラクティブなチャートを生成する事が可能となります。
インタラクションの追加
チャートにインタラクションを追加するには、チャートの interactions コンフィグに interaction コンフィグオブジェクトの配列を設定して下さい。各要素は、文字列、または次のセクションで説明するインタラクションタイプのどれかに一致する type プロパティを含むオブジェクトである必要があります。各オブジェクトは、インタラクション毎に適切な追加のコンフィグオプションを指定できます。
Ext.chart.interactions.Abstract
を拡張し、プリフィクスが interaction のエイリアスで名前を登録すれば、独自のインタラクションを定義することもできます。例えば、もし remove という名前のインタラクションを作りたい場合は、"interaction.remove" というエイリアス名のクラスを作り、使う時にはインタラクションのコンフィグのタイプを ‘remove’ に設定して下さい。
次は、基本的なインタラクションのサンプルです。
アイテムのハイライト (itemhighlight)
itemhighlight インタラクションで、チャート上のそれぞれのデータポイントをハイライトできるようになります。
このインタラクションは、 Ext.chart.interactions.ItemHighlight クラスで実装されています。詳しいコンフィグオプションは、クラスのドキュメントをご覧ください。
回転 (rotate)
rotate インタラクションにより、ユーザーが円グラフやレーダーチャートを回転できるようになります。回転の操作はデフォルトではドラッグのジェスチャーになっています。次のコードは、円グラフやレーダーチャートに回転のインタラクションを追加するのがどれだけ簡単かを示します。
interactions: ['rotate'] |
このインタラクションは、 Ext.chart.interactions.Rotate クラスで実装されます。コンフィグオプションの詳細はクラスのドキュメントを参考にして下さい。
レジェンド ストア
チャートは、シリーズから集められたレジェンドの情報を表示するストアを表示します。具体的にいうと、このストアに関して何でもできます。また、このアーキテクチャを利用すると、レジェンド コンポーネントから レジェンド情報を分離する事ができます。そのため、好きな場所にレジェンドを表示するために、どの技術やカスタム化を利用する事が可能です。
利便性のために、レジェンドを表示するよくある基本機能を既に実装した、デフォルトのレジェンドコンポーネントも提供しています。 Chart のコンフィグオブジェクトには legend セクションを指定でき、そうするとデフォルトのレジェンドコンポーネントを有効にして、Chart の親に挿入します。 レジェンドのセクションがデフォルトのレジェンドコンポーネントを有効にし、チャートの親に挿入します。 レジェンド コンポーネントには、docked コンフィグがあり、その方向にドッキングされます。
