チャート[classic] (1)

今回はclassicのチャートです。

まずはチャートを使うための基本を押さえておきます。

app.json

チャートの機能は別パッケージになっているので、app.jsonのrequiresにチャートのパッケージ名chartsを指定します。

"requires": [
    "charts"
]

実装イメージ

Ext.chartパッケージに～Chartというクラスがいくつか存在します。

チャートを表示するときは、軸(axesコンフィグ)とデータ系列(seriesコンフィグ)をそれらクラスに指定します。

この辺りは、数学で最初のころにグラフを覚えたときと同じです。

まずx, y軸の線を引いて、それからデータをプロットし、線グラフにしたり棒グラフにしたりといった感じでグラフを書いていくことでしょう。

ExtJSのチャートでも、axesで軸を定義し、seriesコンフィグで線グラフや棒グラフを指定します。

実装

チャートのデータはやはりストアで管理します。

なので、まずはモデルとストアを用意しました。

モデル、ストア

/**
 * 貯水量モデルクラス。
 *
 * @class Sample.model.WaterStorage
 * @extend Ext.data.Model
 */
Ext.define('Sample.model.WaterStorage', {
    extend: 'Ext.data.Model',

    fields: [
        {
            // 年月
            name: 'ym',
            type: 'string'
        },
        {
            // 量
            name: 'amount',
            type: 'int'
        }
    ]
});

/**
 * 貯水量ストアクラス。
 *
 * @class Sample.store.WaterStorage
 * @extend Ext.data.Store
 */
Ext.define('Sample.store.WaterStorage', {
    extend: 'Ext.data.Store',

    requires: [
        'Sample.model.WaterStorage'
    ],

    model: 'Sample.model.WaterStorage',

    proxy: 'memory',

    data: [
        { ym: '2016/01', amount: 100 },
        { ym: '2016/02', amount: 50 },
        { ym: '2016/03', amount: 30 },
        { ym: '2016/04', amount: 70 },
        { ym: '2016/05', amount: 50 },
        { ym: '2016/06', amount: 40 },
        { ym: '2016/07', amount: 30 },
        { ym: '2016/08', amount: 20 },
        { ym: '2016/09', amount: 40 },
        { ym: '2016/10', amount: 50 },
        { ym: '2016/11', amount: 60 },
        { ym: '2016/12', amount: 50 }
    ]
});

チャートクラスを作成

Ext.chart.CartesianChartを継承したチャートクラスを作成します。

最低限、store, axes, seriesコンフィグの指定が必要です。

/**
 * チャートクラス。
 *
 * @class Sample.views.main.chart.Panel
 * @extend Ext.chart.CartesianChart
 */
Ext.define('Sample.views.main.chart.Panel', {
    extend: 'Ext.chart.CartesianChart',
    xtype: 'chart_panel',

    requires: [
        'Ext.chart.axis.Numeric',
        'Ext.chart.axis.Category',
        'Ext.chart.interactions.ItemHighlight',
        'Ext.chart.series.Line'
    ],

    store: 'WaterStorage',

    axes: [
        {
            type: 'numeric',
            position: 'left',
            minimum: 0,
            title: {
                text: '貯水量'
            }
        },
        {
            type: 'category',
            position: 'bottom',
            title: {
                text: '年月'
            }
        }
    ],

    series: [
        {
            type: 'line',
            xField: 'ym',
            yField: 'amount',
            style: {
                stroke: '#ad5987',
                lineWidth: 2
            },
            marker: {
                type: 'circle',
                radius: 4,
                lineWidth: 2,
                fill: '#ad5987'
            },
            label: {
                field: 'amount',
                display: 'over'
            }
        }
    ]
});

axesコンフィグには、x軸とy軸の情報を指定します。y軸は貯水量を表現したいので、数値を扱えるtype: 'numeric'、x軸は各年月を表現したいので、どの型でもそのまま分類として扱えるtype: 'category'です。あと、どの位置かをpositionで設定します。

seriesコンフィグには、type: 'line'を設定していますが、これは線グラフのデータ系列です。x軸、y軸のデータとしてモデルのどのフィールドを使うかxField, yFieldで指定します。他のstyleやmarkerなどでスタイルなどの補足的な指定ができます。あと、チャート内に表示されている数値は、labelコンフィグが指定されているためです。

これでチャートを使うための基本は押さえました。

次回はExtJSで提供されている色々なチャートを使ってみます。