チャート[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' } } ] });
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' } } ] });
↓のように水平方向にもできます。
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' } } ] });
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')); } } } ] });
とりあえず代表的なグラフを取り上げました。
まだいくつも種類があるので、もう少しチャート回が続きます。