2014.03.22


Ext JSの中でもトップレベルのダサさを誇るPieチャートコンポーネントをどうにかしてあげよう ;)

チャートコンポーネントを弄くるのが少し楽しくなってきたこの頃
どうも tnker です :)

前回チャートのテーマ作成と設定の仕方をやりましたね :)
これで皆さんもチャートの見た目弄り倒してテーマを作成してみましょう!

前回

そして今回は、Ext JSチャートコンポーネントの中でもトップレベルのダサさであるPieチャートの見た目をカスタマイズしてみます。

標準で用意されているPieチャートは次の通り

001

誰がどう見ても絶望的ですね。
今回はこれをシャレオツにしていきましょう。

続きはここから

2014.03.21


Ext JSのシャレオツな設定を外部定義でテーマ化し、幸せなチャートライフを送れる(かもしれない)方法

前回の続き書いていきます :)

前回

前回のエントリーでイケてないチャートコンポーネントをシャレオツな感じにカスタマイズしました。

001

今回はそのシャレオツな見た目の設定をテーマ化してみたいと思います。

チャートのテーマ設定方法

既に読み込まれているテーマであれば、チャートコンポーネントに themeプロパティを設定するだけでOKです

Ext.define('App.view.charts.B', {
    extend  : 'Ext.chart.Chart',
    xtype   : 'chart-b',
    width   : 500,
    height  : 200,
    animate : true,
    theme   : 'xxxxx', ← テーマ名を設定
    store   : 'LineStore',
    ...

たったこれだけでOKです!:)
で、肝心のテーマ作成ですが

もう少しちゃんとしたやり方があると思うんですが、取り急ぎで実装しちゃってます

Themeクラス

ファイル構成等の説明は省略します :(
下記JavaSciprtファイル場所:app/chart/theme/FlatLine.js

Ext.define('App.chart.theme.FlatLine', {
    singleton: true,
    configure: function() {
        Ext.chart.theme.FlatLine = Ext.extend(Ext.chart.theme.Base, {
            constructor: function(config) {
                Ext.chart.theme.Base.prototype.constructor.call(this, Ext.apply({
                    // ここにスタイル設定を書いていきます
                }, config));
            }
        });
    }
});

上記コードの次の部分 Ext.chart.theme.FlatLine = となっている Ext.chart.theme. 以降の文字列がテーマ名として設定される部分になります。

では、スタイル設定を追記していきます。
ちょっとコードが大量になるので、一部省略して書きます。

最後に全文コード載せるので、めんどくさい人はそちらを見てください

続きはここから

2014.03.18


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

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

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

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

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

001

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

先に完成形

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

002

続きはここから
1 2 3 4 5 6 7 8 9 25