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)' });

样例

步骤

1. 使用（www.iconfont.cn） 创建一个iconfont 资源文件， font-family为’js-iconfont‘
2. 添加一个测试SVG图标到iconfont中， 并生成css文件
3. 在页面中引用这个文件，并使用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>  

4. 写一个挂图标的指标，添加到系统指标中
   如何添加系统指标看以前的教程:
   HQChart使用教程28-如何创建系统指标
   指标中我们使用了图标ID=1的图标

var index=
[
     {
         ID:"自定义图标",                    //指标ID
         Name:'自定义图标',                  //指标名称
         Description:'自定义图标',           //描述信息
         IsMainIndex:true,                  //是否是主图指标
         Args:[],                           //指标参数
         Script:                 //脚本
             'DRAWICON(CLOSE>OPEN,LOW,1);'
     },
 ];

 JSIndexScript.AddIndex(index);  //添加到系统指标中

6. 自定义个ID=1的图标,加入到HQChart系统的图标库中

JSComplier.AddIcon({ID:1, Text:'\ue611', Color:'rgb(35,55,55)', Family:'js-iconfont'});    //添加一个obj={ID:, Text:, Color, Family: }

7. 在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

HQChart代码地址

地址：github.com/jones2000/HQChart