Ext Charts アップグレードガイド

Sencha Touch 2.1 でハイパフォーマンスな、タッチ操作に最適化された新しいチャートパッケージを導入しました。 さらに、そのチャートパッケージを Ext JS 5 と Sencha Touch で動作するように拡張しました。 このパッケージでは新機能とともに、タブレットデバイス上での素晴らしいパフォーマンスを提供します。

このガイドでは、 Ext JS Charts から新しい Sencha Charts パッケージにアップデートするために必要な変更点について説明します。

チャート

基本的なチャートには3つのタイプがあります。

• cartesian/chart (直交座標) – 直交座標を使って値をプロットする Series を実装するチャートを生成します。 例えば、Bar (棒グラフ)、Area (エリア)、Line (折れ線) などがあります。
• polar (極座標) – 極座標を使って値をプロットする Series を実装するチャートを生成します。 例えば、Pie (円グラフ)、Radar (レーダー) があります。
• spacefilling (スペースフィリング) – チャートのエリア全体を満たすチャートを生成します。 例えば、Gauge (ゲージ)、Treemap (ツリーマップ) があります。

ext-charts は Series のタイプを調べることで、自動的にチャートのタイプを特定しようとします。 それにより、ユーザーは xtype を ‘chart’ とすることができます。 しかし、sencha-charts では、いくつかの理由で xtype の指定が必要になります。 直交座標のチャートはもっともよく疲れるので、’chart’ というエリアスが割り当てられています。 xtype を ‘chart’ にセットすると、Bar、Line、Schatter、Aria チャートを作りたいのだなと想定されます。 他のタイプのチャートは ‘polar’ や ‘spacefilling’ といった xtype が必要です。

Canvas & SVG

Charts はコンテンツをレンダリングするために、HTML Canvas または SVG を利用できるようになりました。 レンダリングエンジンは利用するプラットフォームによって、自動的に選択されます。 Canvas エンジンのほうがパフォーマンスとしては優れているため、優先されます。 SVG は次のバグのために、現在 Android 4.0+ だけで利用されています。

http://code.google.com/p/android/issues/detail?id=37529

といっても、利用したエンジンに関わらず、チャートは同じ見た目になります。 ただし SVG エンジンは現時点ではシャドーに対応していません。

チャートのコンフィグに engine プロパティを追加して、どちらかのエンジンを強制的に利用させることもできます。 そのコンフィグは次のようになります

engine: Ext.draw.engine.Canvas
engine: Ext.draw.engine.Svg

開発中は、URLに ?svg=true をつけたり外したりすることで、レンダリングエンジンを素早く切り替えることもできます。

チャートの再描画

以前は、チャートを再描画するために、チャートの refresh() を利用していたかもしれません。 今は機能性が高いチャートの redraw() メソッドを利用するのをおすすめします。

アニメーション

チャートの animate コンフィグはデフォルトで true になりました。 アニメーションを無効にしたい場合は、animate を false にセットする必要があります。

グラデーション

gradients コンフィグオブジェクトは現在、少し違う書き方になっています。 gradients オブジェクトを使っているチャートは次のようにアップデートする必要があります

古いスタイル

gradients: [{
    id: 'gradientId',
    angle: 45,
    stops: {
        0: {
            color: '#555'
        },
        100: {
            color: '#ddd'
        }
    }
}, {
    id: 'gradientId2',
    angle: 0,
    stops: {
        0: {
            color: '#590'
        },
        20: {
            color: '#599'
        },
        100: {
            color: '#ddd'
        }
    }
}]

新しいスタイル

gradients: [{
    id: 'gradientId1',
    type: 'linear',
    angle: 45,
    stops: [{
        offset: 0,
        color: 'red'
    }, {
       offset: 1,
       color: 'yellow'
    }]
}, {
   id: 'gradientId2',
   type: 'radial',
   stops: [{
       offset: 0,
       color: '#555',
   }, {
       offset: 1,
       color: '#ddd',
   }]
}]

円形グラデーション

円形グラデーションのサポートを追加しました。 そのため、グラデーションタイプが gradient オブジェクトに必要となります。

チャートの保存

チャートの保存は全てのプラットフォームで一貫して実装することはできません。 多くのモバイルデバイスはユーザーがファイルをダウンロードすることを許可しません。 そのため、 chart.download() の代わりに chart.preview() メソッドを利用します。 どちらも Ext JS 5 の新しいメソッドです。

プレビュー

chart.preview() は、チャートが中に入っているダイアログウィンドウを表示します。 ユーザーはブラウザのネイティブイメージ保存機能を利用して、イメージをダウンロードできます。

ダウンロード

chart.download() はチャートのイメージをクライアント側でダウンロードすることを試みます。 このメソッドは現在 Chrome でのみ動作します。

保存

現在 chart.save() メソッドは非推奨であることに注意して下さい。 非推奨である間は、chart.save() は渡されたタイプの値を無視し、実際の形式は SVG または PNG となります。 このタイプは利用しているレンダリングエンジンに依存します。 chart.save() はダウンロードが出来ないデバイスで呼び出された場合、chart.preview() になります。

イメージラスタライズ

チャートの以前のバージョンでは、chart.save() は SVG ドキュメントを生成して、ラスタライズするために Sencha のサーバーに送信していました。 新しいチャートでは (どのレンダリングエンジンが使用されるかによって) Canvas または SVG 形式で DataURL を生成しますので、同じアプローチが利用できます。

注：まだ新しい形式をサポートするためのサーバー側のアプリケーションをアップグレードしていません。

スプライト

スプライトの属性名は SVG 属性ではなく、 Canvas コンテキスト属性に合わせるようになりました。

新しい属性名にはエイリアスがありますので、古い属性名もまだ認識されます。 ただ、あなたのアプリケーションを長続きさせるためには、新しい属性名を利用することをおすすめします。

追加の属性

二つ新しい属性のサポートも追加しました。lineDash と lineDashOffset です

• lineDash – dash/space のシーケンスを指定する数字の配列 (例えば [1,1] とか [7,3,3,3]) を受入れます。

• lineDashOffset – lineDash シーケンスのどのポイントで描画を始めるか指定します。

Axes

Axes タイプ

Axis のタイプは全て小文字になりました

axes: [
    {
        type: 'numeric',
        position: ‘left',
        ...
    },
    {
        type: 'category',
        position: ‘bottom',
        ...
    }
]

Renderers

renderer は Axis に直接に定義します。以前のバージョンのように label コンフィグの中ではありません。

axes: [{
    type: ‘numeric',
    position: ‘left',
    // 全てのラベルが小数以下1位で丸め、
    // 末尾に '%' を追加します。
    renderer: function (v) { return v.toFixed(1) + ‘%' },
    label: { // renderer はここではない
        fontSize: 14
    }
}]

グリッド

グリッドはデフォルトで無効になりました。

Limits

Axis は limits コンフィグをサポートするようになりました。 下記は使用例です。

limits: [{
    value: 70,
    line: {
        strokeStyle: 'red',
        lineDash: [6, 3],
        title: {
            text: 'Average temperature (˚F)',
            fontSize: 14
        }
    }
}]

Floating Axes

Floating Axis がサポートされました。 Floating Axis は、反対方向に走る他の軸の指定された値を追跡します。

floating コンフィグをご覧になるにはドキュメントを参考にしてください。 次の Kitchen Sink のサンプルもあります

Column – Multi Axis

Radial – Multi Axis

Series

highlightCfg

highlightCfg コンフィグ (オブジェクト) は highlight コンフィグ (boolean / オブジェクト) の代わりに使います。 例えば

series: {
    type: 'pie',
    highlightCfg: {   // 項目がハイライトされたら起きる
        margin: 30    // Series のスプライトのスタイルの変更を定義します
    }
}

過去のPie Series リーズの定義との違いに注目してください

highlight: {
    segment: {
        margin: 30
    }
}

Color

Series の色を手動でセットするためには、colorSet の替わりに color コンフィグ を利用します。 例えば： colorSet: ['#82B525', '#ddd']

shadowAttributes

shadowAttributes コンフィグはサポートされなくなりました。 その替わり、次の様にスタイルを定義できます。

series: {
    style: {
        shadowColor: ‘rgba(0,0,0,0.5),
        shadowBlur: 10
    }
}

注：Svg エンジン Ext.draw.engine.Svg はシャドーに対応していません。

Config

チャートの Series コンフィグは配列になりました。 そして、chart.series.first() は動作しません。

次を利用して下さい

chart.getSeries()[0]

Marker

Series のマーカーを定義するためには、markerConfig コンフィグの替わりに marker コンフィグを利用して下さい。

Column(縦棒グラフ) Series

column タイプの Series はもう存在していません。 その替わりに Bar Series を使います。 例えば

axes: [{
    type: ‘numeric',
    position: ‘left',
    ...
}, {
    type: ‘category',
    position: ‘bottom',
    ...
}],
series: {
    type: ‘bar',
    ...
}

Bar (横棒グラフ) Series

column と同じように、bar タイプの Axis はもう存在していません。 bar Series を利用する必要がありますので、横棒グラフにするには flipXY プロパティに true をセットします。

チャートを反転するには、次のように軸の位置を変更して下さい。

flipXY: true,
axes: [{
    type: ‘numeric',
    position: ‘bottom',
    ...
}, {
    type: ‘category',
    position: ‘left',
    ...
}],
series: {
    type: ‘bar',
    ...
}

Pie (円グラフ) Series

labelField

labelField: 'name'

このコンフィグは次の替わりに利用します

label: {
    field: 'name'
}

Radar (レーダー) Series

Axis タイプ radial はありません。 次を利用して下さい

axes: [{
    type: 'numeric',
    position: 'radial',
}, {
   type: 'category',
   position: 'angular',
}]

次のかわりです。

axes: [{
    type: 'Radial',
    ...
}]

Gauge (ゲージ) Series

Gauge Siries ではテーマをサポートしていませんので、chart.colors、series.style、series.subStyle コンフィグで手動でスタイル設定します。

Area (エリア) Series

label コンフィグはまだサポートしていません。

Scatter (散布図) Series

label コンフィグはまだサポートしていません。