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
个人爱好(模型/摄影)