Ext JSのチャートコンポーネントを必要最低限の設定でシャレオツにする方法を模索する

久しぶりのSencha関係のエントリー書きます:)
本日は Ext JS のチャートのお話。

Sencha Ext JS (Sencha Touchも)には、実はヒジョーに高機能なチャートコンポーネントが用意されております

上記はほんの一部ですが、とにかく色々あります。
ただ1点非常に残念なのが、見た目がよろしくないという点です。

例えば今回参考として使うラインチャートを見てみると

ご覧の通り、なんかショボいです;(
今回はこれを、出来るだけ簡単にシャレオツな見た目に変えてみます。

先に完成形

とりあえず、最終的に下記みたいになるようにしてみます:)

前提条件

とりあえず、今回は Ext JS で画面作るぐらいは普通に出来る人向けに書いてます:(

需要あれば0からでも書きますが･･･

利用するStore

Ext JS のAPIリファレンスに載ってるやつを適当に引っ張ってきているので正直中身は何でも良いです:(

※クラス名部分の名前空間やクラス名自体は、適時読み替えてください

Ext.define('App.store.LineStore', {
    extend: 'Ext.data.Store',
    fields: ['name', 'data1', 'data2'],
    data: [
        { 'name': 'metric one',   'data1': 10, 'data2': 12 },
        { 'name': 'metric two',   'data1': 7,  'data2': 8  },
        { 'name': 'metric three', 'data1': 5,  'data2': 2  },
        { 'name': 'metric four',  'data1': 2,  'data2': 14 },
        { 'name': 'metric five',  'data1': 4,  'data2': 4  }
    ]
});

利用するChart

ここからカスタマイズをしていきますが、とりあえずまっさらな状態のもの

Ext.define('App.view.charts.B', {
    extend  : 'Ext.chart.Chart',
    xtype   : 'chart-b',
    width   : 500,
    height  : 200,
    animate : true,
    store   : 'LineStore',

    axes: [{
        type        : 'Numeric',
        position    : 'left',
        fields      : ['data2'],
        grid        : true,
        minimum     : 0,
    },{
        type        : 'Category',
        position    : 'bottom',
        fields      : ['name'],
        grid        : false
    }],
    series: [{
        type        : 'line',
        axis        : 'left',
        xField      : 'name',
        yField      : 'data2',
        style: {
            'stroke-width': 2
        },
        markerConfig: {
            'radius': 3
        }
    }]
});

この状態で表示してみると、最初にお見せした残念なチャートが表示されると思います。ここから既存プロパティの変更のみで先ほどの見た目まで持って行きます:)

まずはチープなチャートの陰を除去

Ext.define('App.view.charts.B', {
    ...
    store   : 'LineStore',
    shadow  : false,  ← 追加

    axes: [{
        type        : 'Numeric',
        ...
});

※「...」は、コードの省略です

デフォのチャートラインをもう少し太く

Ext.define('App.view.charts.B', {
    ...
    series: [{
        type        : 'line',
        axis        : 'left',
        xField      : 'name',
        yField      : 'data2',
        style: {
            'stroke-width': 3  ← 変更
        },
        markerConfig: {
            'radius': 3
        }
    }]
});

デフォのマーカーも少し工夫して良い感じに

マーカーのボーダーラインに白色を使って、チャートラインとマーカーに自然なメリハリを付ける

Ext.define('App.view.charts.B', {
    ...
    series: [{
    ...
        markerConfig: {
            'radius'      : 6,        ←  変更
            'type'        : 'circle', ←  追加（無くても良いけど一応）
            'stroke'      : '#FFF',   ←  追加
            'stroke-width': 1.5       ←  追加
        }
    }]
});

マウスオーバー時にちょっとインタラクションを

マウスオーバー時の挙動については、highlightプロパティを利用すると簡単に効果を付与できますが実際にはかなり複雑な処理を行う事も可能です。（コンポーネントを内包したTips表示など）

Ext.define('App.view.charts.B', {
    ...
    series: [{
    ...
        markerConfig: {
            ...
        },
        highlight: {                    ←  追加
            'radius'        : 8,        ←  追加
            'stroke'        : '#FFF',   ←  追加
            'stroke-width'  : 1.5       ←  追加
        }                               ←  追加
    }]
});

チャートラインをうにうにさせる

カクカクしているチャートのラインをベジュ曲線のような形にうにうにさせるには下記プロパティを設定してください:)

Ext.define('App.view.charts.B', {
    ...
    series: [{
        type        : 'line',
        axis        : 'left',
        smooth      : true,  ←  追加
        xField      : 'name',
        yField      : 'data2',
        ...
    }]
});

ここまで出来れば、チャートのラインは一通り完成です！
一度確認してみると...

ラインは良いけど背景のグリッドが残念ですね:(
直しましょう;(

とりあえず、グリッドの各ラインが濃すぎなので薄くする

Ext.define('App.view.charts.B', {
    ...
    axes: [{
        type        : 'Numeric',
        position    : 'left',
        fields      : ['data2'],
        grid        : true,
        minimum     : 0,
        gridColor   : '#F0F0F0',  ←  追加
        axisStyle   : {           ←  追加
            'stroke': '#F0F0F0'   ←  追加
        }                         ←  追加
    },{
        type        : 'Category',
        position    : 'bottom',
        fields      : ['name'],
        grid        : false,
        axisStyle   : {          ←  追加
            'stroke': '#F0F0F0'  ←  追加
        }                        ←  追加
    }],
    series: [{
    ...
    }]
});

これで背景のグリッドラインの色を設定出来ます。ここで設定している色は #F0F0F0 なので大分薄くなりますね:) <確認してみよう！

大分良い感じになってきました。
残すは各axisのラベル部分（数値や文字）になります。

各axisのラベルスタイルを良い感じに設定する

詳細な部分は省きますが、ベクターで描画されるチャートコンポーネントのスタイル指定にフォントを指定出来ちゃったりします。なので、axisのラベルにはクライアント側からフォントの指定をしてみましょう。

Ext.define('App.view.charts.B', {
    ...
    axes: [{
        type        : 'Numeric',
        ...
        axisStyle   : {
            'stroke': '#F0F0F0'
        },
        label: {                    ←  追加
            'font': '10px メイリオ'  ←  追加
        }                           ←  追加
    },{
        type        : 'Category',
        ...
        axisStyle   : {
            'stroke': '#F0F0F0'
        },
        label: {                    ←  追加
            rotate: {               ←  追加
                degrees: 315        ←  追加
            },                      ←  追加
            'font': '11px メイリオ'  ←  追加
        }                           ←  追加
    }],
    series: [{
    ...
    }]
});

それぞれラベルのフォントファミリーをメイリオに指定し、CategoryAxisに関してはラベル表示を回転させるrotateプロパティを設定してみました。

これをブラウザで表示してみると･･･

比較的シャレオツなチャートになったんじゃないかな？
元気あればこんな感じの設定をチャートのThemeクラスとして実装するやりかた書きまする:)