Chartパッケージは、データのビジュアル化機能を提供するクラスの階層で構成されています。これらには、マーカーや凡例を実装するためのデータ系列、座標軸、インタラクションおよびメカニズムなどがあります。本ガイドでは、これらのクラスがどのように結びついているのか、また各クラスにどのような機能が含まれるのかを簡単に見ていきます。次のセクションは、特定の座標軸、データ系列およびインタラクションをカバーしています。
Sencha Chart のインストール
Sencha Chart は Ext JS ライブラリにはデフォルトでは含まれていません。Chart パッケージを含めるには、“sencha-charts” をアプリケーションの app.json ファイルで requires ブロックに追加するだけです。パッケージ名をrequiresブロックに追加すると、アプリケーションに対してパッケージが利用可能となるようCmdに指示します。
インクルードを行ったら、アプリケーションが再構築されたことを確認します。以下のコマンドを発行することでアプリケーションを手動で再構築できます。
sencha app buildまた、“app watch”: sencha app watch を有効化できます
Sencha app watch はアプリケーションの資産を監視し、変更を検出すると再構築します。
Chart コンポーネントクラス
すべてのタイプの Chart コンポーネントは、Ext.draw.Containerを継承する AbstractChart クラスから継承されています。Chartコンポーネントはデータ系列や座標軸を管理するコンテナです。これには、データ系列と座標軸を、サイズが変わる度に配置する役割があります。抽象クラスの実装が、performLayout メソッドをオーバーライドしなくてはなりません。例えば、チャートは、座標軸の厚さの変更に応答し、データ系列エリアを再計算する必要があります。
チャートには4つのタイプがあります。
- cartesian/chart - デカルト座標を使用して値をプロットするデータ系列実装のチャートを作成します。この例には、棒グラフ、面グラフ、散布図、折れ線グラフなどがあります。
- polar - 極性座標を使用して値をプロットするデータ系列実装のチャートを作成します。この例には、円グラフ、レーダーチャートなどがあります。
- spacefilling - チャートの領域全体を塗りつぶすチャートを作成します。
ext-charts はシリーズのタイプを評価してチャートタイプを自動的に決定しようとします。これによって、ユーザーは xtype を ‘chart’ に設定できます。ただし、sencha-charts は指定 xtype が場合によっては必要です。デカルト座標チャートが最も一般的に使用され、‘chart’ のエイリアスにマップされます。‘chart’ の xtype を設定するには、棒グラフ、折れ線グラフ、散布図、面グラフが必要であるとの前提に基づきます。その他のタイプのチャートでは ‘polar’ または ‘spacefilling’ の xtype 指定が必要です。
Chart コンポーネントの管理
Chartコンポーネントは次のアイテムを管理します。
- 座標軸 - Ext.chart.axis.Axis 経由でアクセスされ、このビジュアル化のために定義および描画されるすべての座標軸を表します。これはmixedコレクションです。
- データ系列 - Ext.chart.series.Series 経由でアクセスされ、チャートのために描画されるすべてのデータ系列を表します。line、bar、scatterなどがあります。これもmixedコレクションです。
- インタラクション - 一定のイベントが認識された場合に、データ系列と座標軸を直接操作するコントローラです。
- 凡例ストア - データ系列から収集された凡例情報を表します。通常、このストアにデータリストを添付して、凡例情報の変更に応じ自動的に更新させることができます。
座標軸
すべての種類の軸を示すために Ext.chart.axis.Axis を提供しています。座標軸オブジェクトは、そのドッキング位置により様々な働きをします。
- 左/右 - 座標軸は垂直です。
- 上/下 - 座標軸は水平です。
座標軸は、データ系列が座標系にデータ値をマップするのに役立ちます。それらは表そうとしているデータのタイプによって決まります。
- numeric - この軸に追加されるデータは数値であり、連続しています。
- time - この軸に追加される（または変換される）データは日付時間値であり、連続しています。
- category - この軸に追加されるデータは任意の有限集合に属するものです。データポイントは軸に沿って等間隔に置かれます。
軸の動作は、異なる種類の軸レイアウトや軸セグメントを軸に設定すると簡単に変更できます。
データ系列
データ系列は、 折れ線データ系列、棒データ系列または散布データ系列などの具体的なビジュアル化により継承される抽象クラスです。
Seriesクラス自体は、これらのデータ系列すべてに共通のコード、例えばイベント処理、強調表示、マーカー、ラベルなどのコードを持っています。
以下のセクションでは、利用できるデータ系列のタイプを説明します。また、チャート、座標軸およびデータ系列の選択を含む、完全なデータ系列設定の例も示しています。詳しくは、データ系列のドキュメントをご覧ください。
面
面データ系列は積み上げ面グラフを作成し、複数の集約された情報層を表すためによく使われます。他のデータ系列と同様に、面データ系列はチャートの series コンフィグに追加しなくてはなりません。
積み上げデータ系列には、面データ系列や棒データ系列など複数のYフィールドを指定できます。面データ系列の典型的な構成オブジェクトは、次のコードサンプルのように表れます。
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
}
}
]
}
]
});棒
棒データ系列は、積み上げ棒グラフまたはグループ化棒グラフを作成し、進行または回帰を示す分類された数値データを表すためによく使われます。以前のChartパッケージと違い、棒データ系列とは縦方向の棒グラフ、つまりカラムデータ系列を指すことにご注意ください。flipXYをチャートに設定すると、横方向のグラフにできます。
棒データ系列は、積み上げまたはグループ化のいずれかが可能です。データ系列の stacked コンフィグを 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}
]
},
//set legend configuration
legend: {
docked: 'right'
},
//define the x and y-axis configuration.
axes: [
{
type: 'numeric',
position: 'bottom',
grid: true,
minimum: 0
},
{
type: 'category',
position: 'left'
}
],
//define the actual bar series.
series: [
{
type: 'bar',
xField: 'name',
yField: ['g1', 'g2'],
axis: 'bottom',
// Cycles the green and blue fill mode over 2008 and 2009
// subStyle parameters also override style parameters
subStyle: {
fill: ["#115fa6", "#94ae0a"]
}
}
]
}
]
});折れ線
折れ線データ系列は折れ線グラフを作成し、棒グラフとは別に、進行または回帰を示す分類された数値データを表します。次の例では、折れ線データ系列の典型的な設定オブジェクトを示します。
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'
},
//define x and y axis.
axes: [
{
type: 'numeric',
position: 'left'
},
{
type: 'category',
visibleRange: [0, 1],
position: 'bottom'
}
],
//define the actual series
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
}
}]
}
]
});円
円データ系列は円グラフを作成し、多数のカテゴリがあると同時に全体として意味を持つ定量的情報（任意の年の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'],
//configure the legend.
legend: {
docked: 'bottom'
},
//describe the actual pie series.
series: [
{
type: 'pie',
xField: 'g1',
label: {
field: 'name',
display: 'rotate'
},
donut: 25,
style: {
miterLimit: 10,
lineCap: 'miter',
lineWidth: 2
}
}
]
}
]
});レーダー
レーダーデータ系列はレーダーチャートを作成し、限られた数のカテゴリの異なる定量的値を比較するのに非常に有効です。次のコードに、レーダーデータ系列の例を示します。
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'
}
]
}
]
});散布
散布データ系列は散布図を作成し、アプリケーションが、同じ表示内に2つ以上の変数を表せるようにします。これらの変数は、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
},
}
]
}
]
});ゲージ
ゲージデータ系列はゲージチャートを作成し、ある変数の進行を表すためによく使われます。ストアの使用に加え、ゲージデータ系列の値を設定して値を表示することもできます。
次のコードサンプルに例を示します。
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"]
}]
}
]
});インタラクション
このセクションでは、Sencha Charts パッケージ内のインタラクション機能について紹介します。これらの機能を利用すれば、非常にインタラクティブなチャートを作成することができるため、ユーザーは複雑なデータセットを視覚化したりナビゲートしたりできます。
インタラクションの追加
チャートにインタラクションを追加するには、そのチャートの interactions コンフィグを、インタラクションコンフィグオブジェクトの配列に設定します。各オブジェクトは文字列であるか、インタラクションタイプ（以降のセクションで説明）の1つと適合する type プロパティを含まなくてはなりません。各オブジェクトは、特定のインタラクションに適切な追加のコンフィグオプションを含む場合もあります。
Ext.chart.interactions.Abstract クラスを実装して独自のインタラクションを定義し、interaction プレフィックスを持つエイリアスで名前を登録することができます。例えば、remove と呼ばれるインタラクションを作成する場合、“interaction.remove” という名前でクラスのエイリアスを作成し、次に type:‘remove’ をインタラクションコンフィグに設定します。
以下は基本的なインタラクションの例です。
アイテムの強調表示
itemhighlight インタラクションを使うと、チャート上の個々のデータポイントアイテムを強調表示することができます。
このインタラクションは Ext.chart.interactions.ItemHighlight クラスにより実装されます。詳細な設定オプションについては、クラスのドキュメントを参照してください。
回転
回転インタラクションを使うと、ユーザーは、円グラフやレーダーチャートを回転できます。デフォルトでは、回転はドラッグ操作で行います。以下のスクリプトスニペットは回転インタラクションを円またはレーダーチャートに追加する事がどれほど簡単かを示します。
interactions: ['rotate']このインタラクションは Ext.chart.interactions.Rotate クラスにより実装されます。詳細な設定オプションについては、クラスのドキュメントを参照してください。
凡例ストア
チャートはストアを明け渡してデータ系列から収集した凡例情報を表します。技術的には、このストアで何でも行えます。くり返しになりますが、このアーキテクチャは凡例情報と凡例コンポーネントを切り離すことも可能にしており、それにより、凡例を希望の場所に表示するために、どんな技術やカスタマイズも用いることができます。
また、便利なように、凡例表示のための一般的な基本機能をいくつか実装したデフォルトの凡例コンポーネントも提供しています。チャート設定オブジェクトは、デフォルトの凡例コンポーネントを有効にする legend セクションを受け入れ、チャートの親にそれを挿入します。デフォルトの凡例コンポーネントには docked コンフィグが含まれ、そちらの側にドッキングされます。