仕事が多すぎて日曜日までずれ込んだ。まだ動かしていないけど、今日はここまで。

/// <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担当)

Graph(グラフ1本に対応)-固定要素、xy軸情報、マウスカーソルに対応する情報など

GraphElement(グラフの値1日分に対応) 派生：CandleStick, Bar, Line
という感じか？まだまだ、完成しそうにない。来週中には、UIは度外視してグラフくらいは描けるようになるかもしれない。
時間がかかっても自作にこだわる理由。他人が作ったグラフや指標、シグナルを使うのってなんか悔しいじゃない。自分に都合がいいように改良できなくてもどかしいし、他人と同じことをやってるんじゃだめでしょ？

Tweet