HQChart使用教程30-K线图如何对接第3方数据11-如何绘制多组自定义图标

使用自定义svg图标显示再指标上，这里我们只支持svg图片，其他的格式图片不支持。
示例地址：https://jones2000.github.io/HQChart/webhqchart.demo/samples/kline_MULTI_SVGICON.html

效果图

步骤

1.创建iconfont文件

这里我使用阿里巴巴矢量图标库来创建几个svg图标。Famail名字为js-iconfont, 导入几个图标

2. 配置一个第3方指标

这里我新配置一个指标名为‘SVG图标标记’的指标

 var option=
  {
      Type:'历史K线图',
      ........................
      Windows: 
      [
          {
              Index:'SVG图标标记',
              API: 
              {
                  Name:'SVG图标标记',
                  Script:null,
                  Args:null, 
                  Url:'http://127.0.0.1:18080/api/jsindex' //随便填 但不能为空
              } 
              
          },
          {
              Index:"MACD", 
          },
                  
      ], //窗口指标
    ................................
}

3. 网络协议回调计算指标

再NetworkFilter回调中， 我们自己计算 ‘SVG图标标记’ 指标

data.Name 可以获取当前是哪个网络协议
request.Data.indexname 用来获取当前是那个远程指标
这里使用timeout来模拟异步指标计算

function NetworkFilter(data, callback)
{
    console.log('[NetworkFilter] data', data);

    if (data.Name=='APIScriptIndex::ExecuteScript')
    {
        var request=data.Request;
        if (request.Data.indexname=='SVG图标标记')
        {
            data.PreventDefault=true;
            setTimeout(()=>
            {
                var hqchart=data.HQChart;
                var kData=hqchart.ChartPaint[0].Data;

                var closeLine={name:'收盘价线', type:0, data:kData.GetClose() };
                var line2= 
                { 
                    name:'MULTI_SVGICON', type:1, 
                    Draw: 
                    { 
                        DrawType:'MULTI_SVGICON', 
                        DrawData: 
                        {
                            Family:'js-iconfont', 
                            Icon:
                            [
                                { Date:20190916, Value:15.5, Symbol:'\ue611', Color:'rgb(240,0,0)', Baseline:1 },  //0 居中 1 上 2 下
                                { Date:20190919, Value:15.3, Symbol:'\ue615', Color:'rgb(240,240,0)',Baseline:2 },
                                { Date:20190909, Value:15.4, Symbol:'\ue615', Color:'rgb(240,100,30)'}
                            ] 
                        }
                    } //绘制图标数组
                };

                var apiData=
                {
                    code:0, 
                    stock:{ name:hqchart.Name, symbol:hqchart.Symbol }, 
                    outdata: { date:kData.GetDate() , outvar:[closeLine,line2] } 
                };
                
                
                console.log('[NetworkFilter::NetworkFilter] apiData ', apiData);
                callback(apiData);
            }, 500);
        }
    }
}

自定义图标json格式

name

‘MULTI_SVGICON’ 固定

type

1 固定

Draw

图标及坐标信息

Draw.DrawType

MULTI_SVGICON 固定

Draw.DrawData

个个图标的位置

Draw.DrawData.Family

对应iconfont 的family名字

Draw.DrawData.Icon

图标数组 一项对应1个图标

{ 
	Date:（格式:yyyymmdd)在X轴的日期,
	Time: (格式hhmm)在X轴的时间(分钟才有效), 
	Value:Y轴坐标值
	Symbol:图标字符, 
	Color:颜色(可选), 
	Baseline:上下对齐方式 0=居中, 1=上,2=下,
	Line:{ 文字与最高最低价连线(可选） }
	Text: tooltip提示信息 （2.0格式下面)
	YMove:输出位置在当前坐标下进行y轴的偏移
	Image:{ Data:Image实例， Width:宽度  Height:高度 }  //图标文件，如果存在此字段， 这条记录不会绘制iconfont的图标
 }

Draw.DrawData.Icon.Text 2.0格式
{
 AryText:
  [
       //Title：标题  Text：内容   Color：内容颜色  Align:内容输出对齐方式 "Left", "Right", 默认"Right"
       { Title:"日期:", Text:`2010-01-01`, Color:"rgb(230,230,230)", Align:"Left"},
       { Title:"提示:", Text:"提示信息xxxxx", Color:"rgb(250,0,0)",Align:"Left"}
 ]
}

Draw.DrawData.Icon.Line

Line:{ Color:“rgb(153,50,204)”, KData:“L”, Width:3, Offset:[3,10], Dash:[5,5] }
Color:线段颜色
KData: 文字和K线的连线位置，字符串， L=最低价 H=最高加 C=收盘价
Width:3 线段粗细 （可选）
Offset:线段两头缩进 [0]=K线位置缩进偏移 [1]=文字位置的缩进偏移
Dash:[] 虚线， （可选）

图标显示在K线最高/最低价上

Draw.DrawData.Icon.Value 设置为"H",或"L" 就可以直接对应这个K线的最高最低价上了

var line2= 
{ 
    name:'MULTI_SVGICON', type:1, 
    Draw: 
    { 
        DrawType:'MULTI_SVGICON', 
        DrawData: 
        {
            Family:'js-iconfont', 
            Icon:
            [
                { Date:20190916, Value:15.5, Symbol:'\ue611', Color:'rgb(240,0,0)', Baseline:1 },  //0 居中 1 上 2 下
                { Date:20190919, Value:15.3, Symbol:'\ue615', Color:'rgb(240,240,0)',Baseline:2 },
                { Date:20201202, Value:15.4, Symbol:'\ue615', Color:'rgb(240,100,30)',Line:{Color:"rgb(65,105,225)", KData:"L", Width:3, Offset:[3,15],Dash:[5,5]}},
                { Date:20210106, Value:23.6, Symbol:'\ue611', Color:'rgb(240,100,30)',Line:{Color:"rgb(139,101,8)", KData:"H", Width:3, Offset:[3,15],Dash:[5,5]}},
                { Date:20201228, Value:"L", Symbol:'\ue615', Color:'rgb(240,240,0)',Baseline:1 },
                { Date:20210128, Value:"H", Symbol:'\ue615', Color:'rgb(240,240,0)',Baseline:2 },

            ] 
        }
    } //绘制图标数组
};

完整demo地址

https://github.com/jones2000/HQChart/blob/master/webhqchart.demo/samples/kline_MULTI_SVGICON.html

HQChart代码地址

地址：github.com/jones2000/HQChart

个人爱好(模型/摄影)