/depth-chart

HTML5编写的虚拟货币深度图插件

Primary LanguageHTML

一、什么是深度图

深度图，直观描述了买卖双方交易意愿价格的分布图。只要买卖双方挂单价格有交集，则立即成交。对买方来说，只要卖单价小于等于买入价，则交易就可以成交。对卖方来说，只要买单价大于等于卖出价，也是可以立即成交的。

显然，最有可能成交的就是卖单最低价、买单最高价。所以对于卖出价更高，买入价更低的数据，立即成交的可能性低于前者，所以一般绘制深度图时，只取两者前部分挂单(比如前20个订单): 买入价最高的前20个订单、卖出价最低的前20个订单。

二、本文的目标：

  1. 理解深度图的含义，能懂深度图。
  2. 能使用HTML5 Canvas绘制深度图。
  3. 提供最终的HTML5深度图源代码，希望能帮助到各位读者。

image

如上图，就为BTC在某个时间点的深度图，我们可以得知:

  1. 横坐标为买入、卖出价格刻度。
  2. 纵坐标为订单交易量总数。
  3. 低于某个价格（买单）或高于某个价格（卖单）的交易量围成的区域，即为图示的区块部分。

三、实践 这些图也比较简单，通过使用HTML5 Canvas可以很容易绘出。为此我们需要先准备订单数据：

  1. 准备数据 卖入价最高前N个订单，卖出价最低的前N个订单，以及每个订单对应的交易量，先设定N为10。准备以下数据即可。
var data = {
	"sell":
	[
	{"price":9000,"amount":8176},
	{"price":8999.84,"amount":10245},
	{"price":8999.68,"amount":19147},
	{"price":8999.52,"amount":4150},
	{"price":8999.36,"amount":10420},
	{"price":8999.2,"amount":16053},
	{"price":8999.04,"amount":8480},
	{"price":8998.88,"amount":12751},
	{"price":8998.72,"amount":14187},
	{"price":8998.56,"amount":7916}
],
"buy":[
	{"price":8749,"amount":8379},
	{"price":8748.74,"amount":18582},
	{"price":8748.48,"amount":9173},
	{"price":8748.22,"amount":13327},
	{"price":8747.96,"amount":1990},
	{"price":8747.7,"amount":3414},
	{"price":8747.44,"amount":12062},
	{"price":8747.18,"amount":19389},
	{"price":8746.92,"amount":8999},
	{"price":8746.66,"amount":8675}
]
};

表示了每个买、卖订单的价格和其交易量，注意：数据顺序从价格高到低排列。

计算每个价格区间的交易总量

针对买单，就是要计算“大于等于当前价格的累计总量”，同理，针对卖单，就是要计算“小于等于当前价格的累计总量”。

for(i in $data['buy']){
		var total = 0;
		for(n=0; n<= i; n++){
				total += $data['buy'][n]['amount'];
		}
		
		$data['buy'][i]['total'] = total;
	}
	
for(i in $data['sell']){
		var total = 0;
		for(n=i; n< $data['sell'].length; n++){
				total += $data['sell'][n]['amount'];
		}
		
		$data['sell'][i]['total'] = total;
}

每个订单的total就是累计交易总量值。

2.开始绘图

HTML5 canvas左上角为0点，向右为X轴正方向，向下为Y轴正方向。先准备3块画布，图表区、价格刻度区，交易量刻度区。

最后，你可以结合ajax实现动态图表展示。

具体的代码，可以查看最终效果

image