HQChart使用教程30-K线图如何对接第3方数据27-如何在指标中渲染DOM元素

DOM指标

把指标的输出数据通过一个一个DOM元素显示出来

效果图

代码示例

使用NetworkFilter回调用 处理

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

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

            var closeLine={
    
    name:'收盘价线', type:0, data:kData.GetClose() };
            
            var doms= 
            {
    
     
                name:'MULTI_HTMLDOM', type:1, 
                Draw: 
                {
    
     
                    DrawType:'MULTI_HTMLDOM', 
                    Callback:(op,obj)=>{
    
     drawDomCallback(op,obj); }, //绘制dom的回调函数， 渲染dom由外部执行
                    DrawData: 
                    [
                        {
    
     Date:20190916, Value:15.5, Text:'15.5' , Guid:"jj_1"},
                        {
    
     Date:20201202, Value:15.4,Text:'15.4',Guid:"jj_2" } , 
                        {
    
     Date:20210106, Value:23.6, Text:'23.6' ,Guid:"jj_3"},
                        {
    
     Date:20201228, Value:"L", Text:'最低',Guid:"jj_4" },
                        {
    
     Date:20210128, Value:"H", Text:'最高',Guid:"jj_5" },
                    ]
                } //绘制文字
            };
            

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

json结构说明

name

固定 MULTI_HTMLDOM

type

固定 1

Draw

输出数据

Draw.DrawType

固定 MULTI_HTMLDOM

Draw.DrawData

输出的文本数组

{
Date:日期格式yyyymmdd,
Time:时间分钟K线有有效格式hhmm,
Value:y轴位置， 字符串， L=最低价 H=最高价
Text:‘输出信息，也可以是dom信息’
Guid:“数据唯一的id”
},

Draw.Callback

dom渲染回调函数 function(op,obj)

渲染dom回调函数

参数

op

操作ID 1=开始渲染 2=渲染完成 3=渲染中

obj

单条渲染的数据
{
KData:当前的K线数据,
Item:当前输出的数据,
IsShow:是否显示,
Self:dom绘制类示例,
X:输出信息显示的X轴坐标,
Y: 输出信息显示的Y轴坐标
DrawItem:[] 所有绘制项数据， 只有再op==2的时候才有
};

注意

开始和结束错误 只有Self信息
如是当前dom是隐藏的（IsShow==false）, X, Y 是没的
切换指标的时候需要外部自己清理dom. hqchart内部不处理

dom渲染回调例子

var domCache=new Map();
function drawDomCallback(op,obj)
{
    
    
    if (op==1) 
    {
    
    
        console.log("[drawDomCallback] 开始绘制 op, obj", op, obj);
    }
    else if (op==2) 
    {
    
    
        console.log("[drawDomCallback] 绘制完成 op, obj", op, obj);
    }
    else if (op==3) 
    {
    
    
        console.log("[drawDomCallback] 开始绘制中 op, obj", op, obj);
        var item=obj.Item;
        var dom;
        if (domCache.has(item.Guid))
        {
    
    
            dom=domCache.get(item.Guid);
        }
        else
        {
    
    
            dom=document.createElement("div");
            dom.style.position = "absolute";
            dom.style.background='rgba(255,228,181,0.8)';
            dom.innerText=item.Text;
            dom.style["pointer-events"]="none";

            var klineDiv=document.getElementById('kline');
            klineDiv.appendChild(dom);
            domCache.set(item.Guid, dom);
        }
        if (obj.IsShow==false)
        {
    
    
            dom.style.display = "none";
        }
        else
        {
    
    
            dom.style.left =obj.X + "px";
            dom.style.top=obj.Y+"px";
            dom.style.display = "block";
        }
        
    }
}

交流QQ群: 950092318

如果还有问题可以加交流QQ群: 950092318

HQChart代码地址

地址：github.com/jones2000/HQChart

个人爱好(模型/摄影)