今回はSencha Ext JS6で新機能が追加されたPie ３Dに触れて見たいと思います。

このPie 3DとはExt JSでの3Dのパイチャートになります。 3DチャートはExt JS5から既に機能として備わっており、Pie 3Dも搭載されていました。従来のPie 3Dではラベルや凡例、ツールチップなどの表示は出来なかった為、 下記の図の様に単純なデータの表示だけがサポートされておりました。

今回のExt JS6ではラベルや凡例、ツールチップをサポートし、更には3D効果の設定レベルが改善されUIとして充実した物になっています。では、早速Ext JS6で改善されたPie 3Dを試して行きたいと思いますが、そのままコーディングしようとしてもChartsパッケージが使用できないため、設定を追記する必要があります。 Sencha Cmdでgenerateしてプロジェクトを生成するとChartsパッケージがデフォルトで読込まれていないため、Chartsを使える様にする必要があります。 やり方は簡単でgenerateして出来たプロジェクトのドキュメントルート下にあるapp.jsonに追記するだけです。

この様にrequireにchartsを追記します。これでchartsが使える用になりました。
では、早速Pie 3Dのコーディングをしていきます。

コーディング例

xtypeにはPieを作成するためのコンポーネントクラスである’polar’を指定します。作成したいグラフによってこのクラスを変更させる必要があると言う事を覚えておいて下さい。(※cartesian/chartなど) 実際に表示させるデータは下記の様にstoreにブラウザ毎のシェア率を定義したものになります。このデータを使ってグラフ化させてみます。

実際にPie3Dを指定するのはseriesになります。ここのtypeにpie3dを指定する事で3DのPieグラフを描画させる事ができます。このtypeから3dをとると2d型のPieグラフになります。実際に試して頂けると3d、2dの切り替わりがわかるかと思います。そしてExt JS6の新機能であるlabelオプションに表示させたい文字列の設定をする事でグラフ上にブラウザの文字列が表示されます。今回は’browser’というidを指定しました。これはstoreのデータに指定したbrowserを指しています。
最後にツールチップの設定です。 trackMouseをtrueにし、rendererにはメソッドを定義していますが、このメソッドでやっている事は簡単でマウスがあたった際に「ブラウザ名:比率」表示するようフォーマットを行っているだけです。
このようにツールチップに表示させたい文字列をメソッドを使って形成する事も可能です。
では、コーディングしたコードを実際に画面上で見てみたいと思います。

サンプル画面の動き

Sencha Ext JS 6 Pie-3Dサンプル

マウスを当てると選択した部分が動き、更にはツールチップが表示されブラウザ毎の比率が表示される事がわかるかと思います。また、凡例も表示されておりそれぞれの色がどのデータを表しているかという事も理解できます。この3D部分の大きさや高さなどはoptionの設定を変更するだけで自在に操る事が出来ます。

まとめ

いかがでしたでしょうか？
Sencha Ext JSの特徴の1つとして、チャート種類の充実が上げられます。Sencha Ext JS6ではPie-3Dの機能が追加されましたが、今後も様々な表現を可能にするため、チャートの種類や機能が追加されていくはずです。最近ではPCやタブレットで気軽に情報を把握するためにガジェットを用いたwebシステムが数多く見られるので、Webでグラフを扱う場合には、Sencha Ext JSの使用を検討いただければ幸いです。

次回はこのPie3Dに3D化の設定を持たせ拡張させてみたいと思います。