HQChart使用教程32-如何K线图显示自定义SVG矢量图标
在k线图上我们有时候需要标注一些信息, 如果买卖信号等
效果图
HQChart支持在K线上显示自定义的SVG矢量图标。为什么要用矢量图标呢? 矢量图标支持放大缩小不会失真.这样就可以跟随K线放大缩小。其他类型的png,jpg等图标无法达到这个效果所以就不支持了。
分析家语法函数DRAWICON
DRAWICON支持在K线上绘制图标
用法:DRAWICON(COND,PRICE,TYPE),当COND条件满足时,在PRICE位置画TYPE号图标(TYPE为1–46)。
例如:DRAWICON(CLOSE>OPEN,LOW,1)表示当收阳时在最低价位置画1号图标。
JSComplier.AddIcon
1. 添加一个SVG系统图标
JSComplier.AddIcon(obj) ;
obj={ID:图标ID, Text:‘SVG图标’, Color:‘颜色’, Family:‘iconfont字体名字’}
2. 文字图标
JSComplier.AddIcon({ ID:1, Symbol:'💰', Color:'rgb(238,44,44)' });
样例
步骤
- 使用(www.iconfont.cn) 创建一个iconfont 资源文件, font-family为’js-iconfont‘
- 添加一个测试SVG图标到iconfont中, 并生成css文件
- 在页面中引用这个文件,并使用WebFont预加载图标,(如果不预先加载,第1次图标可能无法显示出来)
<!-- 使用阿里云图片 -->
<link rel="stylesheet" href="https://at.alicdn.com/t/font_1196214_ny3l0dbclr.css" />
......
<script src="content/js/webfont.js"></script>
<script>
//预加载下阿里云图片
WebFont.load({ custom: { families: ['js-iconfont'] } });
..........
</script>
- 写一个挂图标的指标,添加到系统指标中
如何添加系统指标看以前的教程:
HQChart使用教程28-如何创建系统指标
指标中我们使用了图标ID=1的图标
var index=
[
{
ID:"自定义图标", //指标ID
Name:'自定义图标', //指标名称
Description:'自定义图标', //描述信息
IsMainIndex:true, //是否是主图指标
Args:[], //指标参数
Script: //脚本
'DRAWICON(CLOSE>OPEN,LOW,1);'
},
];
JSIndexScript.AddIndex(index); //添加到系统指标中
- 自定义个ID=1的图标,加入到HQChart系统的图标库中
JSComplier.AddIcon({ID:1, Text:'\ue611', Color:'rgb(35,55,55)', Family:'js-iconfont'}); //添加一个obj={ID:, Text:, Color, Family: }
- 在SetOption中添加我们能上面定义好的指标‘自定义图标’
var option=
{
Type:'历史K线图',
Windows:
[
{
Index:'自定义图标'
}
],
.........
这样一个K线上显示自定义图标就完成了
效果图
图标大小配置
通过修改全局资源变量可以修改图标显示大小
如果修改全局资源见教程 HQChart使用教程4- 如何自定义K线图颜色风格
修改DRAWICON节点下的配置就可以,Icon对应iconfont图标配置, Text对应文本输出配置
注意 小程序,uniapp由于不支持iconfont,只支持修改Text配置
function JSChartResource()
{
................
//多图标指标ChartMultiSVGIcon -> MULTI_SVGICON
//单图标指标ChartSingleText -> DRAWICON DRAWTEXT
this.DRAWICON=
{
Icon:
{
MaxSize:24, //图标最大
MinSize:12, //图标最小
Zoom:
{
Type:1, //0=放大(K线宽度*Value) 1=放大(K线+间距)*Value 2=(K线+间距)+2*Value;
Value:1
}
},
Text:
{
MaxSize:50, //字体最大
MinSize:12, //字体最小
Zoom:
{
Type:1, //0=放大(K线宽度*Value) 1=放大(K线+间距)*Value 2=(K线+间距)+2*Value;
Value:1
},
FontName:'Arial' //字体
}
}
........................
交流QQ群: 950092318
如果还有问题可以加交流QQ群: 950092318