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

需要填充背景色K线 数组

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

Draw.Angle

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

交流QQ群

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

HQChart代码地址

地址：github.com/jones2000/HQChart

个人爱好(模型/摄影)