日経225 トレードメモ出張所

日経225先物のオンライン売買管理サイト「トレードメモ」の機能紹介用の出張所です。
お知らせだけでは書ききれない内容を載せていきたいと思います。

morris.jsはjavascriptでグラフを簡単に表示できるライブラリです。
bootstrapとの相性もよいため、多くのbootstrapのテンプレートで利用されています。

トレードメモではかなりこった表示の仕方をしているためグラフ表示は自前(tradememo.chart-r-x.x.x.js)で作成しており使っていませんが、別のサイト構築のため利用しております。
その中でグラフに目標値のようなものが書けないか気になったため調査したところ、
eventsとgoalsというオプションがありました。

簡単に言ってしまうと、上記オプションを指定する事で以下の事ができます。
events →グラフ中の指定位置に縦線が書ける
goals→グラフ中に指定位置に横線が書ける

ただ、ライブラリ自体がシンプルなだけに線しか引けず、なんとかラベルのような文字もあわせて書けないか調べてみるとeventsは以下のサイトで発見!
Add labels to events

拡張してraphael(大本のsvgを操作するライブラリ)を利用してテキストを書いているようなので、参考にしてgoalsのサンプルも作成してみました。

通常の折れ線グラフ




normal_line

Morris.Line({
  element: 'morris-line-chart',
  data: [
    { y: '2006', a: 10 },
    { y: '2007', a: 45 },
    { y: '2008', a: 50 },
    { y: '2009', a: 75 },
    { y: '2010', a: 50 },
    { y: '2011', a: 75 },
    { y: '2012', a: 100 }
  ],
  xkey: 'y',
  ykeys: ['a'],
  labels: ['Series A']
});


折れ線グラフ eventsオプション設定時

配列なので複数指定も可能です。 例 events: ['2008','2009'] event_line

Morris.Line({
  element: 'morris-line-chart',
  data: [
    { y: '2006', a: 10 },
    { y: '2007', a: 45 },
    { y: '2008', a: 50 },
    { y: '2009', a: 75 },
    { y: '2010', a: 50 },
    { y: '2011', a: 75 },
    { y: '2012', a: 100 }
  ],
  xkey: 'y',
  ykeys: ['a'],
  labels: ['Series A'],
  events: ['2008']
});


折れ線グラフ goalsオプション設定時

eventsと同様配列なので複数指定も可能です。 例 goals: ['80','90']

また大小関係も判定しているようで文字列でもそれなりに動くようです。

goal_line

Morris.Line({
  element: 'morris-line-chart',
  data: [
    { y: '2006', a: 10 },
    { y: '2007', a: 45 },
    { y: '2008', a: 50 },
    { y: '2009', a: 75 },
    { y: '2010', a: 50 },
    { y: '2011', a: 75 },
    { y: '2012', a: 100 }
  ],
  xkey: 'y',
  ykeys: ['a'],
  labels: ['Series A'],
  goals: ['80']
});


折れ線グラフ eventsオプション+ラベル設定時

advanced_event_line

    var originalDrawEvent = Morris.Grid.prototype.drawEvent;

    Morris.Grid.prototype.gridDefaults.eventTextSize = 12;

    Morris.Grid.prototype.drawEvent = function(event, color) {
        originalDrawEvent.apply(this, arguments);

        var idx = $.inArray(event, this.events);
        if(!this.options.eventLabels || !this.options.eventLabels[idx])
            return;

        this.raphael.text(
		this.transX(event),
		this.top - this.options.eventTextSize, 
		this.options.eventLabels[idx]).attr('stroke', color).attr('font-size',
		 this.options.eventTextSize).attr( {'text-anchor':'start'} );
    }

Morris.Line({
  element: 'morris-line-chart',
  data: [
    { y: '2006', a: 10 },
    { y: '2007', a: 45 },
    { y: '2008', a: 50 },
    { y: '2009', a: 75 },
    { y: '2010', a: 50 },
    { y: '2011', a: 75 },
    { y: '2012', a: 100 }
  ],
  xkey: 'y',
  ykeys: ['a'],
  labels: ['Series A'],
  events: ["2011"],
  eventLineColors: ["#B78779"],
  eventLabels: ["start"]
});


折れ線グラフ goalsオプション+ラベル設定時

advanced_goal_line

    var originalDrawGoal = Morris.Grid.prototype.drawGoal;

    Morris.Grid.prototype.gridDefaults.goalTextSize = 12;

    Morris.Grid.prototype.drawGoal = function(goal, color) {
        originalDrawGoal.apply(this, arguments);
        var idx = $.inArray(goal, this.options.goals);

       if(!this.options.goalLabels || !this.options.goalLabels[idx])
            return;
        this.raphael.text(
		this.left,
		this.transY(goal)- this.options.goalTextSize, 
		this.options.goalLabels[idx]).attr('stroke', color).attr('font-size',
		 this.options.goalTextSize).attr( {'text-anchor':'start','dominant-baseline':'start'} );
    }

Morris.Line({
  element: 'morris-line-chart',
  data: [
    { y: '2006', a: 10 },
    { y: '2007', a: 45 },
    { y: '2008', a: 50 },
    { y: '2009', a: 75 },
    { y: '2010', a: 50 },
    { y: '2011', a: 75 },
    { y: '2012', a: 100 }
  ],
  xkey: 'y',
  ykeys: ['a'],
  labels: ['Series A'],
  goals: ['80'],
  goalLineColors: ['#B78779'],
  goalLabels: ['end']
});

 

コメント

コメントフォーム
評価する
  • 1
  • 2
  • 3
  • 4
  • 5
  • リセット
  • 1
  • 2
  • 3
  • 4
  • 5
  • リセット