HQChart使用教程61-画图工具接口使用教程
- 添加外部画图工具类
- 注意
- 画图工具实战教程
- QQ群: 950092318
- 完整代码
- HQChart代码地址
- 如果教程或hqchart对你有帮助， 请在git上star，教程点下赞 。谢谢~~
画图工具
什么是画图工具呢， 就是可以在K线上通过鼠标或手势手动绘制出线段，圆，图标等图形。
和一般的绘图工具不同，绘制的图形线段数据回和当前的股票K线图的数据帮点，当K线缩小或放大的时候，绘制的图形也会相应的放大缩小。
效果图
这里我就给手机端的样例吧， Pc端的需要自己用dom做个工具条就可以。
竖屏页面地址：https://opensource2.zealink.com/hqweb/demo/phone31.html
横屏页面地址：https://opensource2.zealink.com/hqweb/demo/phone32.html
分时图竖屏地址：https://opensource.zealink.com/hqweb/demo/minute_demo_drawtool.html
接口说明
选中图形事件
事件注册回调详见：HQChart使用教程5- K线图控件操作函数说明
事件ID: JSCHART_EVENT_ID.ON_CLICK_DRAWPICTURE
当手势或鼠标点中图形的时候回触发这个事件回调
this.Chart.AddEventCallback( {
event:JSCHART_EVENT_ID.ON_CLICK_DRAWPICTURE,
callback:(event,data,obj)=>{ this.OnClickDrawPicture(event,data,obj); }
});
this.OnClickDrawPicture=function(event,data,obj)
{
console.log('[KLineChart::OnClickDrawPicture] data', data);
}回调函数参数
event：注册的事件信息
data ：数据 { DrawPicture:绘制图形的实例 } 图形的坐标信息都可以从这里取到
obj：hqchart实例
完成图形绘制事件
事件ID： JSCHART_EVENT_ID.ON_FINISH_DRAWPICTURE
当图形绘制完成以后 回触发这个回调事件
this.Chart.AddEventCallback( {
event:JSCHART_EVENT_ID.ON_FINISH_DRAWPICTURE,
callback:(event,data,obj)=>{ this.OnFinishDrawPicture(event,data,obj); }
});
this.OnFinishDrawPicture=function(event,data,obj)
{
console.log('[KLineChart::OnFinishDrawPicture] data', data);
}回调函数参数
event：注册的事件信息
data ：数据 { DrawPicture:绘制图形的实例 } 图形的坐标信息都可以从这里取到
obj：hqchart实例
创建一个图形
CreateChartDrawPicture=function(name,option)
name:图形的名称
option:(可选），不填使用默认的
{
LineColor:’#4169E1’, //线段颜色
LineWidth:3, //线段宽度
PointColor:‘rgb(255,130,71)’ //选中点颜色
}
创建完成以后就可以在K线图上使用鼠标或手势绘制图形
目前支持的图形有
case "线段":
case "射线":
case '水平线':
case '趋势线':
case "矩形":
case "圆弧线":
case 'M头W底':
case '平行线':
case '平行通道':
case '价格通道线':
case '文本':
case '江恩角度线':
case '阻速线':
case '黄金分割':
case '百分比线':
case '波段线':
case '三角形':
case '对称角度':
case '圆':
case '平行四边形':
case '斐波那契周期线':
default:
//iconfont 图标
}
<div>
<span class='line1'>线段</span>
..........
</div>
.........
//按钮事件绑定到创建图形函数
$(".line1").click(function() { klineControl.CreateDrawPciture('线段', "line1");} );
.........
this.CreateDrawPciture=function(name, tagName)
{
this.TagName=tagName;
document.getElementsByClassName( this.TagName)[0].style.color='rgb(255,0,0)';//改成选中状态
//TODO:把其他按钮颜色清空
this.Chart.CreateChartDrawPicture(name); //创建图形
}
删除图形
ClearChartDrawPicture=function(drawPicture)
drawPicture： 图形实例，可以通过点击图形回调事件中获取选中的图形，然后删除
如果不填， 删除所有的图形
开始/结束画图（手机端用）
SetChartDrawOption=function(option)
option:
{
IsLockScreen： 锁住当前屏幕 true/false, 锁屏以后当前K线就不能放大拖拽了，这样方便手机端绘图
Zoom: 画图点选中区域放大倍数，这样可以方便手机端上的手势选中， 默认是1
}
画图保存
绘制的图形可以保存到缓存中，下次打开这个股票的时候直接就可以记载显示。
在setoption里面设置一个缓存的key 就可以。
this.Option=
{
Type:'历史K线图', //创建图形类型
......
DrawTool: //画图工具
{
StorageKey:'4E7EA133-D6C8-4776-9869-1DDDCC5FA744'
}
}
添加外部画图工具类
//注册一个新的画图工具 {Name:中文名字, ClassName:类名, Create:function()}
JSChart.RegisterDrawPicture=function(obj)//注册一个新画图工具图标 {Name:, Text: , Color:, Family:}
JSChart.RegisterDrawPictureIonFont=function(obj)注意
有些图形目前还不支持横屏， 如果你们用到了可以去群里反应，我回给你们加上，如果没人用我就先不支持。 毕竟只有我1个人在维护，精力有限。
画图工具实战教程
HQChart实战教程24 - 自定义K线画图工具设置框（线段类）
QQ群: 950092318
如果还有问题或新的需求可以加交流QQ群: 950092318
完整代码
这里我就贴一个手机端竖屏的代码，其他的可以去打开网页f12就可以看到
<!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 http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<title>手机端画图工具</title>
<!-- 加载资源 -->
<link rel="stylesheet" href="content/css/tools.css" />
<link rel="stylesheet" href="../jscommon/umychart.resource/font/iconfont.css" />
</head>
<body>
<div>
<span id='klinedraw'>开始画图</span>
<span id='klinedraw2'>完成画图</span>
</div>
<div>
<span class='line1'>线段</span>
<span class='line2'>射线</span>
<span class='line3'>水平线</span>
<span class='line4'>趋势线</span>
<span class='line5'>矩形</span>
<span class='line6'>圆弧线</span>
<span class='line7'>M头W底</span>
<span class='line8'>黄金分割</span>
</div>
<div>
<span class='line9'>波段线</span>
<span class='line10'>斐波那契周期线</span>
<span class='line11'>上涨</span>
<span class='line12'>下跌</span>
<span class='line13'>左边</span>
<span class='line14'>右边</span>
</div>
<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.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> <!-- 白色风格和黑色风格配置信息 -->
<!-- 引入vConsole的JS库 -->
<script src="../vConsole-3.2.0/dist/vconsole.min.js"></script>
<script>
//var vConsole = new VConsole();
//console.log('create VConsole');
//简单的把K线控件封装下
function KLineChart(divKLine)
{
this.DivKLine=divKLine;
//K线配置信息
this.Option= {
Type:'历史K线图', //创建图形类型
Windows: //窗口指标
[
{Index:"MA", Modify:false,Change:false,IsDrawTitleBG:true},
{Index:"VOL", Modify:false,Change:false,IsDrawTitleBG:true},
{Index:"RSI", Modify:false,Change:false,IsDrawTitleBG:true},
],
Symbol:'600000.sh',
IsAutoUpdate:true, //是自动更新数据
IsShowRightMenu:false, //右键菜单
CorssCursorTouchEnd:true,
EnableScrollUpDown:true,
IsClickShowCorssCursor:true,
KLine: //K线设置
{
DragMode:1, //拖拽模式 0=禁止拖拽 1=数据拖拽 2=区间选择 3=点击模式
Right:1, //复权 0 不复权 1 前复权 2 后复权
Period:5, //周期 0 日线 1 周线 2 月线 3 年线
MaxReqeustDataCount:1000, //数据个数
MaxRequestMinuteDayCount:10, //分钟数据取5天
PageSize:50, //一屏显示多少数据
//Info:["互动易","大宗交易",'龙虎榜',"调研","业绩预告","公告"], //信息地雷
IsShowTooltip:false, //是否显示K线提示信息
},
KLineTitle: //标题设置
{
IsShowName:true, //不显示股票名称
IsShowSettingInfo:true //不显示周期/复权
},
Border: //边框
{
Left:5, //左边间距
Right:50, //右边间距
Bottom:25, //底部间距
Top:25 //顶部间距
},
Frame: //子框架设置
[
{SplitCount:3,StringFormat:0, IsShowLeftText:false},
{SplitCount:2,StringFormat:0, IsShowLeftText:false},
{SplitCount:2,StringFormat:0, IsShowLeftText:false}
],
ExtendChart: //扩展图形
[
{Name:'KLineTooltip' } //手机端tooltip
],
DrawTool: //画图工具
{
StorageKey:'4E7EA133-D6C8-4776-9869-1DDDCC5FA744'
}
};
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=JSChart.Init(this.DivKLine); //把K线图绑定到一个Div上
this.Chart.SetOption(this.Option); //设置K线配置
//选中图形事件
this.Chart.AddEventCallback( {
event:JSCHART_EVENT_ID.ON_CLICK_DRAWPICTURE,
callback:(event,data,obj)=>{ this.OnClickDrawPicture(event,data,obj); }
});
//完成图形事件
this.Chart.AddEventCallback( {
event:JSCHART_EVENT_ID.ON_FINISH_DRAWPICTURE,
callback:(event,data,obj)=>{ this.OnFinishDrawPicture(event,data,obj); }
});
this.Chart.AddEventCallback( {
event:JSCHART_EVENT_ID.ON_CLICK_INDEXTITLE,
callback:(event,data,obj)=> { this.OnClickIndexTitle(event,data,obj);}
});
}
this.OnSize=function() //自适应大小调整
{
var height= $(window).height();
var width = $(window).width();
//this.DivKLine.style.top='px';
//this.DivKLine.style.left='50px';
this.DivKLine.style.width=(width)+'px';
this.DivKLine.style.height=(height-50)+'px';
if (this.Chart) this.Chart.OnSize();
}
this.OnClickDrawPicture=function(event,data,obj)
{
console.log('[KLineChart::OnClickDrawPicture] data', data);
}
this.OnFinishDrawPicture=function(event,data,obj)
{
console.log('[KLineChart::OnFinishDrawPicture] data', data);
document.getElementsByClassName(this.TagName)[0].style.color='rgb(0,0,0)';
}
this.OnClickIndexTitle=function(event,data,obj)
{
console.log('[KLineChart::OnClickIndexTitle] data', data);
}
this.TagName;
this.CreateDrawPciture=function(name, tagName)
{
this.TagName=tagName;
document.getElementsByClassName( this.TagName)[0].style.color='rgb(255,0,0)';
//TODO:把其他按钮颜色清空
var drawOption=
{
LineColor:'#4169E1', //线段颜色
LineWidth:3, //线段宽度
PointColor:'rgb(255,130,71)' //点颜色
};
this.Chart.CreateChartDrawPicture(name,drawOption);
}
this.StartDraw=function()
{
this.Chart.SetChartDrawOption({IsLockScreen:true, Zoom:35}); //手机端使用锁屏模式
}
this.StopDraw=function()
{
this.Chart.SetChartDrawOption({IsLockScreen:false, Zoom:1}); //手机端取消锁屏模式
}
}
$(function ()
{
WebFont.load({ custom: { families: ['iconfont'] } }); //预加载下iconfont资源
var klineControl=new KLineChart(document.getElementById('kline'));
klineControl.Create();
$(".line1").click(function() { klineControl.CreateDrawPciture('线段', "line1");} );
$(".line2").click(function() { klineControl.CreateDrawPciture('射线',"line2")} );
$(".line3").click(function() { klineControl.CreateDrawPciture('水平线',"line3")} );
$(".line4").click(function() { klineControl.CreateDrawPciture('趋势线', "line4")} );
$(".line5").click(function() { klineControl.CreateDrawPciture('矩形', "line5")} );
$(".line6").click(function() { klineControl.CreateDrawPciture('圆弧线', "line6")} );
$(".line7").click(function() { klineControl.CreateDrawPciture('M头W底', "line7")} );
$(".line8").click(function() { klineControl.CreateDrawPciture('黄金分割', "line8")} );
$(".line9").click(function() { klineControl.CreateDrawPciture('波段线', "line9")} );
$(".line10").click(function() { klineControl.CreateDrawPciture('斐波那契周期线', "line10")} );
$(".line11").click(function() { klineControl.CreateDrawPciture('icon-arrow_up', "line11")} );
$(".line12").click(function() { klineControl.CreateDrawPciture('icon-arrow_down', "line12")} );
$(".line13").click(function() { klineControl.CreateDrawPciture('icon-arrow_right', "line13")} );
$(".line14").click(function() { klineControl.CreateDrawPciture('icon-arrow_left', "line14")} );
$("#klinedraw").click(function() { klineControl.StartDraw()} );
$("#klinedraw2").click(function() { klineControl.StopDraw()} );
})
</script>
</body>
</html>
HQChart代码地址
地址：https://github.com/jones2000/HQChart
