Hello, Ext.js! - 新パッケージ「Ext.chart」でチャート図をらくらく生成

Ext.chartはチャート図の生成に特化したパッケージだ。データストアでチャート図として表示したいデータを管理し、Flashでチャート図を表示する。同パッケージには次のコンポーネントが用意されている。

  • Chart
  • PieChart
  • CartesianChart
  • LineChart
  • BarChart - numeric
  • time
  • category axis

Ext.data.JsonStoreを使用し、チャート図を描画するコードを書いてみよう。

chart.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="ja">
    <head>
        <title>Hello, Ext,JS! / Chart</title>
        <link rel="stylesheet" type="text/css" href="./ext-3.0.0/resources/css/ext-all.css" />
        <script type="text/javascript" src="./ext-3.0.0/adapter/ext/ext-base.js"></script>
        <script type="text/javascript" src="./ext-3.0.0/ext-all.js"></script>
        <script type="text/javascript">
        <!--
        Ext.chart.Chart.CHART_URL = './ext-3.0.0/resources/charts.swf';

        Ext.onReady
        (
            function()
            {

                var store = new Ext.data.JsonStore
                (
                    {
                        fields:['ID', 'value'],
                        data:
                        [
                            {ID:'A', value: 10000},
                            {ID:'B', value: 5000},
                            {ID:'C', value: 2500},
                            {ID:'D', value: 1250},
                            {ID:'E', value: 625},
                            {ID:'F', value: 312},
                            {ID:'G', value: 156},
                            {ID:'H', value: 78}
                        ]
                    }
                );

                new Ext.Panel
                (
                    {
                        title: 'Ext JS / Chart - piechart',
                        renderTo: 'container',
                        width:500,
                        height:300,
                        layout:'fit',

                        items:
                        {
                            xtype: 'piechart',
                            store: store,
                            categoryField: 'ID',
                            dataField: 'value',
                        }
                    }
                );
            }
        );
        -->
        </script>
        <style type="text/css">
        <!--
        #container
        {
            padding:50px;
        }
        -->
        </style>
    </head>

    <body>
        <div id="container">

        </div>
    </body>
</html>

Ext.chart.Chart.CHART_URLでチャート図を描画するswfファイルを指定し、Ext.data.JsonStoreでJSON形式でチャート図にしたいデータを格納、Ext.Panelでレンダリング先・データストアを指定しチャートを出力している。実際にこれをWebブラウザで出力してみよう。

Ext.data.JsonStoreで格納したデータが折れ線グラフで表示された。グラフのポインタにマウスカーソルを乗せると、値が表示される

itemsのxtypeでは「linechart」のほかに「barchart」「piechart」といった値を指定することでチャートの表示方法を変更することができる。Chart componentsの項を参考につつ、いろいろなチャートを描画してみよう。

chart.htmlのitems中、xtypeを「piechart」、categoryFieldを「ID」、dataFieldを「value」に指定

ご覧のとおり、たったこれだけのコードで見た目もきれいなチャート図を生成できるのは心強い。Flashを使用しているためか、グラフ描画もかなりスムーズに動作する。