初心者のためのExtJS入門

ExtJSを使うので、ついでにまとめていきます

チャート[classic] (2)

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

いくつかチャートの種類を試してみます。

Ext.chart.series.Line

折れ線グラフです。

insetPaddingやinnerPaddingでチャートのパディングを調整しています。何らかの方法で表示を調整しないと、テキストがチャート外にはみ出すことがあるので注意が必要です。

/**
 * チャートクラス。
 *
 * @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',

    insetPadding: {
        top: 40,
        bottom: 40,
        left: 20,
        right: 40
    },

    innerPadding: {
        top: 20,
        left: 40,
        right: 40
    },

    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: 'under'
            }
        }
    ]
});

f:id:sham-memo:20170423133225p:plain

Ext.chart.series.Bar

棒グラフです。

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

    store: 'WaterStorage',

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

    series: [
        {
            type: 'bar',
            xField: 'ym',
            yField: 'amount',
            style: {
                minGapWidth: 20,
                stroke: '#50ada1',
                fill: '#50ada1'
            },
            highlight: {
                strokeStyle: '#4e7d9c',
                fillStyle: '#4e7d9c'
            },
            label: {
                field: 'amount',
                display: 'insideEnd'
            }
        }
    ]

});

f:id:sham-memo:20170423133239p:plain

↓のように水平方向にもできます。

Ext.chart.CartesianChartのflipXYコンフィグをtrueで指定し、軸(axes)の位置(position)を入れ替えています。

一応理屈は同じなので、Ext.chart.series.Lineなどでも可能です(需要はなさそうですが)。

/**
 * チャートクラス。
 *
 * @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.Bar'
    ],

    store: 'WaterStorage',

    flipXY: true,

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

    series: [
        {
            type: 'bar',
            xField: 'ym',
            yField: 'amount',
            style: {
                stroke: '#50ada1',
                fill: '#50ada1'
            },
            highlight: {
                strokeStyle: '#4e7d9c',
                fillStyle: '#4e7d9c'
            },
            label: {
                field: 'amount',
                display: 'insideEnd'
            }
        }
    ]
});

f:id:sham-memo:20170423140730p:plain

Ext.chart.series.Area

面グラフです。

highlightCfgコンフィグで、マウスがマーカーに近づいたときにマーカーのスタイルを変更できます。

あとtooltipコンフィグで、マウスがマーカーに近づいたときにツールチップを表示させています。

/**
 * チャートクラス。
 *
 * @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.Area'
    ],

    store: 'WaterStorage',

    axes: [
        {
            type: 'numeric',
            position: 'left',
            grid: true,
            minimum: 0,
            title: {
                text: '貯水量'
            }
        },
        {
            type: 'category',
            position: 'bottom',
            label: {
                rotate: {
                    degrees: -90
                }
            },
            title: {
                text: '年月'
            }
        }
    ],

    series: [
        {
            type: 'area',
            xField: 'ym',
            yField: 'amount',
            style: {
                stroke: '#ad5987',
                fill: '#d9aac4',
                opacity: 0.6,
                lineWidth: 1
            },
            marker: {
                opacity: 0,
                scaling: 0,
                fx: {
                    duration: 200,
                    easing: 'easeOut'
                }
            },
            highlightCfg: {
                opacity: 1,
                scaling: 1.5
            },
            tooltip: {
                trackMouse: true,
                renderer: function (tooltip, record, item) {
                    tooltip.setHtml(record.get('ym') + ' : ' + record.get('amount'));
                }
            }
        }
    ]
});

f:id:sham-memo:20170423140741p:plain

とりあえず代表的なグラフを取り上げました。

まだいくつも種類があるので、もう少しチャート回が続きます。