HQChart使用教程30-K线图如何对接第3方数据24-如何填充K线背景色

效果图

代码示例

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

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

                var closeLine={name:'收盘价线', type:0, data:kData.GetClose() };
                var text= 
                { 
                    name:'MULTI_TEXT', type:1, 
                    Draw: 
                    { 
                        DrawType:'MULTI_TEXT', 
                        DrawData: 
                        [
                            {Date:20190926, Time:945, Value:14.5, Text:'测试文字1',Color:'rgb(0,255,50)'},
                            {Date:20190801, Time:1011, Value:14.2,Text:'14.2',Color:'rgb(0,55,50)'} , 
                            {Date:20190905, Time:1425, Value:14.15,Text:'发财了'}
                        ]
                    } //绘制文字
                };

                for(var i in kData.Data)
                {
                    var item=kData.Data[i];
                    if (i%40==0) text.Draw.DrawData.push({ Date:item.Date, Value:item.High, Text:item.High.toFixed(2), Baseline:2, Color:'rgb(165,42,42)' });
                    else if (i%20==0) text.Draw.DrawData.push({ Date:item.Date, Value:item.Low, Text:item.Low.toFixed(2), Baseline:1, Color:'rgb(0,100,0)' })
                }

				//这里是这是K线背景色的地方 !!!!!!!!!!!!!
                //K线背景色
                var KLineBG=
                {
                    name:'KLINE_BG', type:1,
                    Draw:
                    {
                        DrawType:"KLINE_BG",
                        Color:['RGBA(200,200,20,0.5)', "RGBA(100,100,100,0.5)"],
                        Angle:0,
                        DrawData:
                        [
                            /* 日线周期的 只有Date
                            { Date:20190926 },
                            { Date:20190927 },
                            { Date:20210104 },
                            { Date:20210105 },
                            { Date:20210106 },
                            */
                            // 分钟周期的 Date ， Time
                            { Date:20210107, Time:1441 },
                            { Date:20210107, Time:1442  },
                            { Date:20210107, Time:1443  },
                            { Date:20210107, Time:1444  },
                        ]
                    }
                }

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

json结构说明

name

固定 KLINE_BG

type

固定 1

Draw

Draw.Color

背景色数组 2个就是渐近色， 1个就单色

Draw.DrawType

固定 KLINE_BG

Draw.Ver

数据结构版本号 有1.0，和 2.0两个版本

Draw.DrawData

需要填充背景色K线 数组

1.0数据版本

K线是一条一条设置进去的

 [
  { Date:日期 ， Time:时间（分钟周期K线才需要) } ,
  .......
 ]

2.0 数据版本

K线是传一个日期范围 Start:起始日期 End:结束日期

{
     ...........
	 Ver:2.0,
	 DrawData:
	//日K线范围 没有Time字段
	[
	     { Start:{Date: 20210922}, End:{ Date:20211022} },
	     { Start:{Date: 20211025}, End:{Date:20211026} },
	     ......
	]
}

{
	...........
 	 Ver:2.0,
	 DrawData:
	//分钟K线范围 需要Time时间字段
	[
	     { Start:{Date: 20211022, Time:1020 }, End:{ Date:20211022, Time:1300} },
	     { Start:{Date: 20211025, Time:0945 }, End:{Date:20211026, Time:1022 } },
	     ......
	]
}

Draw.Angle

渐近色角度 1=垂直 0=水平

交流QQ群

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

HQChart代码地址

地址：github.com/jones2000/HQChart

个人爱好(模型/摄影)