HQChart使用教程42-K线图如何对接数字货币

需求

支持各种24小时交易的数据货币。
HQChart内置的数据源中是没有数字货币，但可以通过对接第3方数据货币源来实现对数字货币的K线图展示

效果图

需要的后台数据清单

K线数据需要提供日线的K线数据和1分钟的K线数据
有同学会问哪周线，月线， 15分钟线等其他周期的K线数据不需要提供吗？答案是不需要，只需要提供基础的日线和1分钟这2个基础的K线数据就可以， 其他的周期都是可以通过这2个基础的K线数据合并而成，HQChart会在前端自动计算其他周期的K线数据，减轻后台开发人员工作量。

需要的API清单

1. 日线全量数据下载API

2. 当天日线数据API

3. 1分钟数据全量下载API

4. 当天1分钟数据API

5. 1分钟数据分页下载API （可选，拖拽数据自动下载历史数据功能）

   什么是全量数据： 指的是历史数据+当天的最新数据

由于我这边没有数字货币的API数据源，所以就从网上下载了一些数字货币的K线保存到本地作为测试数据
以下是4个测试数据文件， 你可以在demo目录找到

<script src='bit_demo_testdata.js'></script> <!--测试数据 分钟线全量数据 -->
<script src='bit_demo_testdata2.js'></script> <!--测试数据 分钟线增量数据 -->

<script src='bit_demo_testdata3.js'></script> <!--测试数据 日线全量数据 -->
<script src='bit_demo_testdata4.js'></script> <!--测试数据 日线增量数据 -->

数字货币代码规则

HQChart 设计的时候是支持所有品种， 个个品种是通过代码+后缀的方式来区分的，数字货币的后缀为’.BIT’,
如:BTCUSDT需要增加后缀为 BTCUSDT.BIT

网络协议对接

使用NetworkFilter网络协议回调，截获数据请求换成第3方的数据请求并转换成HQChart数据格式传回去就可以了。 关于网络协议回调可以看教程 QChart使用教程30-K线图如何对接第3方数据1
这里就直接上代码片段了
在NetworkFilter回调中，根据协议名字指定到对应的数据处理函数中

function KLineChart(divKLine)
{
    this.Option= 
    {
       Type:'历史K线图',   //创建图形类型
       .........
       NetworkFilter:function(data, callback) { self.NetworkFilter(data, callback); } ,   //绑定网络协议回调
    }
    
    .........
	this.NetworkFilter=function(data, callback)
	{
	    console.log('[NetworkFilter] data', data);
	    switch(data.Name)
	    {
	        case 'KLineChartContainer::ReqeustHistoryMinuteData':   //1分钟全量数据下载
	            this.RequestHistoryMinuteData(data, callback);
	            break;
	        case 'KLineChartContainer::RequestMinuteRealtimeData':  //1分钟增量数据更新
	            this.RequestMinuteRealtimeData(data,callback);
	            break;
	        case 'KLineChartContainer::RequestHistoryData':     //日线全量数据下载
	            this.RequestHistoryData(data,callback);
	            break;
	        case 'KLineChartContainer::RequestRealtimeData':    //日线增量数据更新
	            this.RequestRealtimeData(data,callback);
	            break;
	    }
	}
}

关于个个协议的json数据格式可以查看以前的教程或打印demo里的数据
HQChart使用教程30-K线图如何对接第3方数据3-1分钟K数据
HQChart使用教程30-K线图如何对接第3方数据2-日K数据
增量的当天数据json结构直接看demo吧，对应的教程还没有写?

如果要拖拽1分钟K线数据自动下载历史数据 可以查看教程 HQChart使用教程41-分钟K线设置拖拽自动下载历史数据

分时图

目前HQChart的的分时图还不支持数值货币，我们可以使用K线图中1分钟K线的收盘价面积图来实现

效果图

SetOption设置

只需要在SetOption中设置K线类型=收盘价面积图， 如果不需要主图指标就设置一个空指标,并且把主图指标信息显示的高度设置为0

this.Option= 
{
    Type:'历史K线图',   //创建图形类型
     
     Windows: //窗口指标
     [
         {
         	Index:"EMPTY", //设置为空指标
         	Modify:false,Change:false,
         	TitleHeight:0 //去掉指标信息标题的高度
         },
         {Index:"VOL", Modify:false,Change:false}, 
     ], 

     Symbol:'BTCUSDT.BIT',   //数字货币使用.BIT后缀
     IsAutoUpdate:true,          //是自动更新数据
     AutoUpdateFrequency:5000,   //数据更新频率

     KLine:  //K线设置
     {
         ......
         DrawType:4                          //K线类型 0=实心K线柱子 1=收盘价线 2=美国线 3=空心K线柱子 4=收盘价面积图
     },
     ........
}

面积图配色

修改配色接口具体看教程 HQChart使用教程4- 如何自定义K线图颜色风格
面积图配色变量如下

function JSChartResource()
{
    this.CloseLineColor='rgb(0,191,255)';   //收盘价线颜色
    this.CloseLineAreaColor=['rgba(0,191,255,0.8)','rgba(0,191,255,0.2)'];  //收盘价面积图颜色
}

CloseLineAreaColor 面积图颜色， 如果要单色就[‘rgba(0,191,255,0.8)’],如果要渐近就填2个以上

HQChart问题反馈

如果还有问题可以加交流QQ群， 在git首页上可以找到。

HQChart代码地址
地址：github.com/jones2000/HQChart