ローソク図試作品
仕事が多すぎて日曜日までずれ込んだ。まだ動かしていないけど、今日はここまで。
/// <reference path="scripts/typings/easeljs/easeljs.d.ts" /> module SHChart { export class CandleStick implements GraphElement { //ローソク本体 private body: createjs.Shape; //上ヒゲ private uShadow: createjs.Shape; //下ヒゲ private lShadow: createjs.Shape; //陽線か? private isYang: boolean; constructor(public date: Date, public open: number, public high: number, public low: number, public close: number) { this.isYang = open < close; } public getMax(): number { return this.high; } public getMin(): number { return this.low; } public paint(stage: createjs.Stage, min: number, max: number, x: number, width: number, xmin: number, xmax: number, ymin: number, ymax: number): void { //座標決定 //ToDo:0.8でいいのか? var bodyWidth = width * 0.8; var bodyXmin = x - width / 2; var bodyXmax = x + width / 2; var bodyYmin = ymin + (ymax - ymin) * ((max - (this.isYang ? this.close : this.open)) / (max - min)); var bodyYmax = ymin + (ymax - ymin) * ((max - (this.isYang ? this.open : this.close)) / (max - min)); var uShadowYmin = ymin + (ymax - ymin) * ((max - this.high) / (max - min)); var lShadowYmax = ymin + (ymax - ymin) * ((max - this.low) / (max - min)); //本体描画 var g: createjs.Graphics = new createjs.Graphics(); //ToDo:色の変更 g.beginStroke("#000000"); if (!this.isYang) g.beginFill("#000000"); g.drawEllipse(bodyXmin, bodyYmin, bodyXmax - bodyXmin, bodyYmax - bodyYmin); this.body = new createjs.Shape(g); stage.addChild(this.body); //ヒゲの描画 if (uShadowYmin < bodyYmin) { g = new createjs.Graphics(); //ToDo:色の変更 g.beginStroke("#000000") .moveTo(x, bodyYmin) .lineTo(x, uShadowYmin) .closePath(); this.uShadow = new createjs.Shape(g); stage.addChild(this.uShadow); } if (lShadowYmax > bodyYmax) { g = new createjs.Graphics(); //ToDo:色の変更 g.beginStroke("#000000") .moveTo(x, bodyYmax) .lineTo(x, lShadowYmax) .closePath(); this.lShadow = new createjs.Shape(g); stage.addChild(this.lShadow); } } public drop(stage: createjs.Stage) { if(this.body) stage.removeChild(this.body); if(this.uShadow) stage.removeChild(this.uShadow); if(this.lShadow) stage.removeChild(this.lShadow); } } }
クラス図としては
Chart(canvas1枚に対応) ← ChartHandler(UI担当)
1 |
n |
Graph(グラフ1本に対応)-固定要素、xy軸情報、マウスカーソルに対応する情報など
1 |
n |
GraphElement(グラフの値1日分に対応) 派生:CandleStick, Bar, Line
という感じか?まだまだ、完成しそうにない。来週中には、UIは度外視してグラフくらいは描けるようになるかもしれない。
時間がかかっても自作にこだわる理由。他人が作ったグラフや指標、シグナルを使うのってなんか悔しいじゃない。自分に都合がいいように改良できなくてもどかしいし、他人と同じことをやってるんじゃだめでしょ?