需求
我们有的时候需要在K线图右侧绘制一个面积图,并和K线图共享一个Y轴坐标。
效果图
demo页面
步骤
1. 配置一个深度图
在option里面的扩展属性里面配置一个深度图, 并且让K线图右边预留150的宽度用来绘制面积图
this.Option= {
Type:'历史K线图', //创建图形类型
Windows: //窗口指标
[
{Index:"MA", Modify:true,Change:false},
{Index:"VOL", Modify:true,Change:false},
],
Border: //边框
{
Left:5, //左边间距
Right:150, //右边间距 右边留150宽度绘制深度图
Bottom:25, //底部间距
Top:25 //顶部间距
},
......
ExtendChart: //扩展图形
[
//{Name:'KLineTooltip' } //手机端tooltip
{ Name:"深度图", FrameID:0, ID:0 }, //深度图
]
}
参数说明:
Name: 固定: 深度图
FrameID: 对应绘制指标窗口的索引上, 这里我们把面积图绘制在第1个指标窗口右边
ID: key, 唯一的标识, 用来设置设置数据的时候用的。(可以缺省)
Width: 面积图宽度(可以缺省,默认200)
2. 设置数据
设置数据接口
SetDepthMapData( data, isDraw)
data: 面积图配置信息及数据, data 支持设置多个面积图
isDraw: 是否立即重绘
3. 数据格式
数据格式:
[
{
Data:[ {X:对应K线Y轴的数值, Y:横向数值 }, ],
Type: 0 固定值
LineColor: 线段颜色
AreaColor: 面积颜色 支持渐近色
TextColor: 十字光标输出文字颜色
TextBGColor: 十字光标输出文字背景色
IsShowCorssCursor:true/false; //是否显示十字光标的提示信息
},
]
this.RecvDepthMapData=function()
{
//使用默认的颜色配置
var buyData=
{
Data:[],
Type:0
};
var sellData=
{
Data:[],
Type:0 ,
LineColor:'rgba(255,165,0,0.6)',
AreaColor:['rgba(255,165,0,0.5)','rgba(255,165,0,0.4)','rgba(255,165,0,0.3)','rgba(255,165,0,0.2)'],
TextColor:'rgb(248,248,255)',
TextBGColor:"rgb(255,165,0)"
};
//5-12 每个价位的买量
for(var i=5, j=0;i<=12;i+=0.01, ++j)
{
var item={X:i, Y:parseInt((Math.random()+1)*100)*10000 };
if (j%10) item.YText=`买:${item.Y}`;
buyData.Data.push(item);
}
//12-15 每个价位的卖量
for(var i=12, j=0;i<15;i+=0.01,++j)
{
var item={X:i, Y:parseInt((Math.random()+1)*100)*10000 };
if (j%10) item.YText=`卖:${item.Y}`;
sellData.Data.push(item);
}
var data=[buyData,sellData]; //设置2个面积图
this.Chart.SetDepthMapData([{ID:0, Data:data}], true); //ID:对应前面配置深度图的时候设置的ID
}
完整实例代码:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>K线图+深度图</title>
<!-- 加载资源 -->
<link rel="stylesheet" href="../jscommon/umychart.resource/css/tools.css" />
<link rel="stylesheet" href="../jscommon/umychart.resource/font/iconfont.css" />
</head>
<body>
<div id="kline" style="width: 900px;height:400px;position: relative;"></div>
<script src="content/js/jquery.min.js"></script>
<script src="content/js/webfont.js"></script>
<script src='../jscommon/umychart.console.js'></script> <!-- 日志输出 -->
<script src="../jscommon/umychart.network.js"></script> <!-- 网络请求分装 -->
<script src="../jscommon/umychart.js"></script> <!-- K线图形 -->
<script src="../jscommon/umychart.complier.js"></script> <!-- 麦语言解析执行器 -->
<script src="../jscommon/umychart.index.data.js"></script> <!-- 基础指标库 -->
<script src="../jscommon/umychart.style.js"></script> <!-- 白色风格和黑色风格配置信息 -->
<script>
//JSConsole.Chart.Log=() =>{}
//JSConsole.Complier.Log=()=>{}
/*
MARKET_SUFFIX_NAME.GetMarketStatus = function (symbol)
{
return 2;
}
*/
//简单的把K线控件封装下
function KLineChart(divKLine)
{
this.DivKLine=divKLine;
this.Chart=JSChart.Init(divKLine); //把K线图绑定到一个Div上
//K线配置信息
this.Option= {
Type:'历史K线图', //创建图形类型
Windows: //窗口指标
[
//{Index:"EMPTY"},
{Index:"MA", Modify:true,Change:false},
{Index:"VOL", Modify:true,Change:false},
//{Index:"MACD", Modify:true,Change:false},
//{Index:"RSI", Modify:false,Change:false},
],
OverlayIndex:
[
//{Index:'VOL', Windows:0 },
//{Index:'MACD', Windows:0 },
//{Index:'MA', Windows:1 }
], //叠加指标
OverlayIndexFrameWidth:50,
Symbol:'600000.sh',
IsAutoUpdate:true, //是自动更新数据
AutoUpdateFrequency:3000, //数据更新频率
//TradeIndex: {Index:'交易系统-BIAS'}, //交易系统
IsShowRightMenu:true, //右键菜单
IsShowCorssCursorInfo:true, //是否显示十字光标的刻度信息
//CorssCursorTouchEnd:true,
KLine: //K线设置
{
DragMode:1, //拖拽模式 0 禁止拖拽 1 数据拖拽 2 区间选择
Right:1, //复权 0 不复权 1 前复权 2 后复权
Period:0, //周期 0 日线 1 周线 2 月线 3 年线
MaxReqeustDataCount:1000, //数据个数
MaxRequestMinuteDayCount:10, //分钟数据取5天
PageSize:50, //一屏显示多少数据
//Info:["互动易","大宗交易",'龙虎榜',"调研","业绩预告","公告"], //信息地雷
IsShowTooltip:true, //是否显示K线提示信息
DrawType:0, //K线类型 0=实心K线柱子 1=收盘价线 2=美国线 3=空心K线柱子 4=收盘价面积图
//FirstShowDate:20161201,
KLineDoubleClick:false, //禁止双击弹框
},
KLineTitle: //标题设置
{
IsShowName:true, //不显示股票名称
IsShowSettingInfo:true //不显示周期/复权
},
Border: //边框
{
Left:5, //左边间距
Right:150, //右边间距
Bottom:25, //底部间距
Top:25 //顶部间距
},
Frame: //子框架设置
[
{SplitCount:3,StringFormat:0, IsShowLeftText:false, RightTextPosition:0 },
{SplitCount:2,StringFormat:0, IsShowLeftText:false},
{SplitCount:2,StringFormat:0, IsShowLeftText:false}
],
ExtendChart: //扩展图形
[
//{Name:'KLineTooltip' } //手机端tooltip
{ Name:"深度图", FrameID:0, ID:0 }, //深度图
]
};
this.Create=function() //创建图形
{
var self=this;
$(window).resize(function() { self.OnSize(); }); //绑定窗口大小变化事件
var blackStyle=HQChartStyle.GetStyleConfig(STYLE_TYPE_ID.BLACK_ID); //读取黑色风格配置
JSChart.SetStyle(blackStyle);
this.DivKLine.style.backgroundColor=blackStyle.BGColor; //设置最外面的div背景
this.OnSize(); //让K线全屏
this.Chart.SetOption(this.Option); //设置K线配置
setTimeout(() => { this.RecvDepthMapData() }, 5000);
}
this.OnSize=function() //自适应大小调整
{
var height= $(window).height();
var width = $(window).width();
this.DivKLine.style.top='px';
this.DivKLine.style.left='px';
this.DivKLine.style.width=width+'px';
this.DivKLine.style.height=height+'px';
this.Chart.OnSize();
}
this.RecvDepthMapData=function()
{
//使用默认的颜色配置
var buyData=
{
Data:[],
Type:0
};
var sellData=
{
Data:[],
Type:0 ,
LineColor:'rgba(255,165,0,0.6)',
AreaColor:['rgba(255,165,0,0.5)','rgba(255,165,0,0.4)','rgba(255,165,0,0.3)','rgba(255,165,0,0.2)'],
TextColor:'rgb(248,248,255)',
TextBGColor:"rgb(255,165,0)"
};
for(var i=5, j=0;i<=12;i+=0.01, ++j)
{
var item={X:i, Y:parseInt((Math.random()+1)*100)*10000 };
if (j%10) item.YText=`买:${item.Y}`;
buyData.Data.push(item);
}
for(var i=12, j=0;i<15;i+=0.01,++j)
{
var item={X:i, Y:parseInt((Math.random()+1)*100)*10000 };
if (j%10) item.YText=`卖:${item.Y}`;
sellData.Data.push(item);
}
var data=[buyData,sellData];
this.Chart.SetDepthMapData([{ID:0, Data:data}], true);
}
}
$(function ()
{
WebFont.load({ custom: { families: ['iconfont'] } }); //预加载下iconfont资源
var klineControl=new KLineChart(document.getElementById('kline'));
klineControl.Create();
})
</script>
</body>
</html>
<style>
/*
.klineframe-toolbar
{
color:rgb(238,233,233);
}
.klineframe-toolbar span:hover
{
color: #0182d4;
}
*/
</style>
如果还有问题可以加交流QQ群: 950092318
HQChart代码地址
地址:github.com/jones2000/HQChart