Kangaroonote

  1. Home
  2. Kangaroonote
  3. Canvas で折れ線グラフをオブジェクト指向っぽくかいてみる

  • Author :
  • 2011-08-24

最近は仕事で主に絵ばかり描いているので、たまには Script も書いとこうと思って。

実はメソッドでアクセスしなくてもフィールドにダイレクトでアクセスできるという問題を残しつつ、っぽく書いてみた。

普段は jQuery ばかり使って楽をしているので、ちゃんと prototype を使ってみたり。

しばらくはコーディングをちゃんとやり直そうかな、と思っている。

Demo

フィールド
target : String描画するキャンバスの id
width : Number表の幅
height : Number表の高さ
hLineLabel : Array 横軸のラベル
vLine : Objectmax : Number 縦軸の最大値
min : Number 縦軸の最小値
interval : Number 縦軸の最小値と最大値の区切りの数
unit : String 単位
data : ArraydataLabel : String データ配列のラベル
label : [String] 個々のデータのラベル
value : [Number] 値
color : String 線の色 16 進数
notes : Bool凡例の有無
メソッド
getTarget描画している Canvas を取得
getData(n, nn)表のデータを取得 n 番目のデータの nn 番目を取得
getDataLen()データの長さを取得
getDataVlen(n)data[n].value の長さを取得
setTarget(id)表のデータを表示する Canvas を指定
setSize(width, height)キャンバスのサイズ 引数は幅と高さの数値を指定
setVHLine(hLine.label, vLine.min, vLine.max, vLine.interval, vLine.unit)横軸のラベル 縦軸の最小値と最大値の区切りの数と単位を指定
setData(arr, color, dataLabel)表で表現するデータの値 第一引数は多次元配列でラベルと値 第二引数で色を指定 第引数はデータ配列のラべルを指定
isNotes(bool)凡例の有無 引数は真偽値
isToolTip(bool)吹き出しを表示するかしないか 引数は真偽値
draw()表を描画

カテゴリ:

トラックバック(0)

http://vosegus.org/cgi/mt/mt-tb.cgi/409