使用 HTML 5画布和JavaScript绘制利润/损失图表

分享于 

13分钟阅读

Web开发

  繁體

介绍

本文将介绍 HTML 5画布和JavaScript如何用于绘制选项交易策略的利润和损失概要图。

Background

作为一个开发人员,利用财务利用财务资产的理论和实践,我需要计算交易的利润和损失。 比如,在 http://www.investopedia.com/university/options/option.asp 中,你可能已经成为这个领域的专家,而我认为你已经是这个领域的专家,而且已经在做这项工作。 你可能会这么好,当你进入一个交易时,你可能会有所有的潜在增益和损失。 图片的价值是 true。 有多种不同的选择交易策略从简单的单腿和多腿复杂。 为了本文的目的,我将通过购买一个电话来简化利润和损失与股票价格的关系。 复杂策略的图表将使用相同的技术。 使用 HTML 5画布及它的绘图功能,我将构建一个方程式,并在高中心中画出利润/损失图。

所以假设我们想购买 1个合约( 100股份),它的中的调用选项是美国 SP 500糖指标代码。 在撰写本文时,交易日结束时,5,SPX的价格为 2047,成交价格为strike的价格大约为每个合同的$5.5. 那么这个交易的利润/亏损图表在June到期时是什么样子的? 对于预览,它看起来像图表 below:

从图 上面的最大损耗是 $550,盈盈价格为 2115,利润一旦价格通过了平衡价格就无限。 如果你认为在下个月使用这种策略,你会觉得 SP 500将在下一个月分成几百个点。

使用代码

现在是关于如何使用 HTML 5画布和JavaScript来绘制像 上面 这样的图表的技术讨论。 这些步骤为 below:

  • 定义 HTML 5绘图曲面。
  • 定义具有描述图表的必要参数的JavaScript对象。
  • 定义 上面 对象绘制X ( 股票价格) 轴的方法。
  • 为 上面 对象定义绘制Y 轴轴的方法。
  • 定义 上面 对象以绘制表示买入呼叫选项策略的方程式的方法。
  • 定义用于将图表转换为绘图曲面的方法。
  • 使用具有目标参数的对象,并调用它的方法绘制图表。

步骤1:
HTML 5 canvas用于定义这里代码段中的绘图曲面:


<!DOCTYPE HTML>


<html>


<head>


 <style>


 body {


 margin: 0px;


 padding: 0px;


 }


 </style>


</head>


<body>


 <canvas id="canvasProfitLoss" width="1200" height="600" style="border:1px solid #000000;"></canvas>


<script>


</script>


</body>


</html>



步骤2:
方程的图形需要有某些参数来定义X 和Y 轴的范围,X 和Y 是在步骤 1中的<脚本> </脚本标记之间插入的JavaScript图表对象的代码片断:

//object definition


function ProfitLossChart(minPrice, minProfitLoss, maxPrice, maxProfitLoss, unitsPrice, unitsProfitLoss) {



 this.canvas = document.getElementById("canvasProfitLoss");


 this.minPrice = minPrice;


 this.minProfitLoss = minProfitLoss;


 this.maxPrice = maxPrice;


 this.maxProfitLoss = maxProfitLoss;


 this.unitsPrice = unitsPrice;


 this.unitsProfitLoss = unitsProfitLoss;


 this.tickSize = 20;



 this.context = this.canvas.getContext('2d');


 this.rangePrice = this.maxPrice - this.minPrice;


 this.rangeProfitLoss = this.maxProfitLoss - this.minProfitLoss;


 this.unitPrice = this.canvas.width/this.rangePrice;


 this.unitProfitLoss = this.canvas.height/(this.rangeProfitLoss);


 this.centerProfitLoss = Math.round(Math.abs(this.minProfitLoss/this.rangeProfitLoss) * this.canvas.height) ;


 this.centerPrice = + Math.round(Math.abs(this.minPrice/this.rangePrice) * this.canvas.width);


 this.iteration = (this.maxPrice - this.minPrice)/1000;


 this.scalePrice = this.canvas.width/this.rangePrice;


 this.scaleProfitLoss = this.canvas.height/this.rangeProfitLoss;



 };



步骤3:
要绘制X ( 价格) 轴,使用 JavaScript Prototype给对象提供功能。 我们绘制刻度线,单位标签,轴标签。

// using prototype and create function


 ProfitLossChart.prototype.drawPriceAxis= function () {


 var context = this.context;


 context.save();


 context.beginPath();



 //start x 10 pix to the left edge, y is at the center


 context.moveTo(10, this.centerProfitLoss);


 //draw horizontal line, Price axis


 context.lineTo(this.canvas.width, this.centerProfitLoss);



 context.strokeStyle = this.axisColor;


 context.lineWidth = 2;


 context.stroke();



 // draw right tick marks


 var pricePosIncrement = this.unitsPrice * this.unitPrice;


 var pricePos, unit;


 context.font = this.font;


 context.textAlign = 'center';


 context.textBaseline = 'top';



 pricePos = pricePosIncrement;


 unit = this.unitsPrice ;


 while (pricePos <this.canvas.width) {


 //draw tick marks as line crossing the Price axis


 context.moveTo(pricePos, this.centerProfitLoss - this.tickSize/2);


 context.lineTo(pricePos, this.centerProfitLoss + this.tickSize/2);


 context.stroke();


 //draw numerical label for tic marks


 //note we add minPrice


 context.fillText(unit + this.minPrice, pricePos, this.centerProfitLoss + this.tickSize/2 - 30);


 unit += this.unitsPrice;


 pricePos = Math.round(pricePos + pricePosIncrement);


 }



 //draw X axix label as Price at center of X axis


 context.font = "12px";


 context.fillStyle = "green";


 context.fillText("Price($)", this.canvas.width/2, this.centerProfitLoss + this.tickSize/2 -50);


 context.restore();


 };




步骤4:
步骤 3相同的概念和技术,创建一种对象的方法,用tickmarks和标签绘制Y ( 损益/损失) 轴:

ProfitLossChart.prototype.drawProfitLossAxis = function () {


 var context = this.context;


 context.save();


 context.beginPath();


 //draw vertical line


 context.moveTo( 20, 0)


 context.lineTo( 20, this.canvas.height);


 context.strokeStyle = this.axisColor;


 context.lineWidth = 2;


 context.stroke();



 // draw tick marks


 var profitLossPosIncrement = this.unitsProfitLoss * this.unitProfitLoss;


 var profitLossPos, unit;


 context.font = this.font;


 context.textAlign = 'right';


 context.textBaseline = 'middle';



 // draw top tick marks


 profitLossPos = this.centerProfitLoss - profitLossPosIncrement;


 unit = this.unitsProfitLoss;


 while (profitLossPos> 0) {


 context.moveTo(20 - this.tickSize/2, profitLossPos);


 context.lineTo(20 + this.tickSize/2, profitLossPos);


 context.stroke();


 context.fillText(unit, 70 - this.tickSize/2 - 3, profitLossPos);


 unit += this.unitsProfitLoss;


 profitLossPos = Math.round(profitLossPos - profitLossPosIncrement);


 }



 // draw bottom tick marks


 profitLossPos = this.centerProfitLoss + profitLossPosIncrement;


 unit = -1 * this.unitsProfitLoss;


 while (profitLossPos <this.canvas.height) {


 context.moveTo(20- this.tickSize/2, profitLossPos);


 context.lineTo(20 + this.tickSize/2, profitLossPos);


 context.stroke();


 context.fillText(unit, 70 - this.tickSize/2 - 3, profitLossPos);


 unit -= this.unitsProfitLoss;


 profitLossPos = Math.round(profitLossPos + profitLossPosIncrement);


 }



 //draw Y axix label as Profit/Loss (P/L) to the right



 context.font = "12px";


 context.fillStyle = "green";


 context.fillText("Profit/Loss($)", this.centerPrice + 140, this.canvas.height/4);


 context.restore();


 };




步骤 5:
绘制损益表包括在定义的迭代中绘制一系列小的线,并将它们组合起来形成完整的图表。 所需策略的精确表达式作为匿名函数从对象的用户传递。 在我们的例子中,它是"购买呼叫选项"方程,对于另一个策略,相应的方程通过。 代码段是 below:

ProfitLossChart.prototype.drawEquation = function (drawFunction) {


 var context = this.context;


 context.save();


 this.transformContext();



 context.beginPath();


 context.moveTo(this.minPrice, drawFunction(this.minPrice));



 for (var x = this.minPrice + this.iteration; x <= this.maxPrice; x += this.iteration) {


 context.lineTo(x, drawFunction(x));


 }


 context.restore();


 context.lineJoin = 'round';


 context.lineWidth = 3;


 context.strokeStyle = 'red';


 context.stroke();


 context.restore();


 };




步骤 6:

//do the transform


 ProfitLossChart.prototype.transformContext = function () {


 var context = this.context;


 this.context.translate(this.centerPrice, this.centerProfitLoss);


 context.scale(this.scalePrice, -this.scaleProfitLoss);


 };




就是这样。我们定义了绘制图表所需的对象的所有属性和方法。 让我们在前面提到的SPX索引上购买调用选项,并绘制它:

步骤 7:

//define parameters, instantiate and draw the chart!


 var minPrice = 0;


 var maxPrice = 2200;


 var minPL = -10000;


 var maxPL = 10000;


 var unitsPrice = 50;


 var unitsProfitLoss = 500;



 //create object


 var chart = new ProfitLossChart(minPrice, minPL, maxPrice, maxPL, unitsPrice, unitsProfitLoss);


 chart.drawPriceAxis();


 chart.drawProfitLossAxis();



 //draw buy call equation, spx June 17, today is 5/16/2016


 var pStrike = 2110;


 var pCall = 5.5;


 chart.drawEquation(function (x) {


 if (x> pStrike)


 {


 return 100 * (x - pStrike - pCall);


 }


 else


 {


 return -(100 * pCall);


 }


 });




Points of Interest

本文只是简单介绍了 HTML5 Canvas 特性的一些基础,以绘制应用于金融选项世界的图表和图表。 当然还有它的他更高级的特性,比如调整大小,交互式图表,移动鼠标 cursor 上面。

有 1个或者 2个网站,为许多它的他复杂策略提供免费选项图表,比如实时选项数据。 我还开发了自己的站点 www.optionschart101.com 插件,用于这里目的。 在当前阶段,网站提供了如铁鹰。蝴蝶。跨座等策略的绘图。 这个网站是一个工作,我希望有一天提供它的他高级服务,但是现在并不是免费的。


JAVA  Javascript  CHAR  CAN  chart  Canvas  
相关文章