HQChart使用教程30-K线图如何对接第3方数据12-如何在指标中绘制文字

在第三方指标中快速显示文本

效果图

代码示例

使用NetworkFilter回调用 处理

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)' })
                 }

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

json结构说明

name

固定 MULTI_TEXT

type

固定 1

Draw

多文本数据

Draw.DrawType

固定 MULTI_TEXT

Draw.DrawData

输出的文本数组

{
Date:日期格式yyyymmdd,
Time:时间分钟K线有有效格式hhmm,
Value:y轴位置 （特殊位置 “H”=最高价, “L”=最低价 “TOP”=顶部 “BOTTOM”=底部）
Text:‘输出文字’,
Color:‘颜色’（可选），
Font:字体（可选）如：Font:‘18px 微软雅黑’
Baseline:（上下居中方式 可选 0=居中 1 上 2 下）
Line:{ 文字与最高最低价连线(可选） }
YMove: 调整文字Y轴显示位置，当前位置Y轴+YMove
},

Draw.DrawData.Line

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

 DrawData: 
[
    {Date:20210120,  Value:9.84, Text:'买',Color:'rgb(0,255,50)', Line:{Color:"rgb(153,50,204)", KData:"L", Width:3, Offset:[3,10], Dash:[5,5]}},
    {Date:20210112,  Value:10.1, Text:'卖',Color:'rgb(0,255,255)', Line:{Color:"rgb(153,0,0)", KData:"H", Width:4, Offset:[3,10], Dash:[3,5]}},
]

文字显示在K线最高/最低价上

DrawData.Value 设置为"H", “L” 就可以设置为显示在这个K线的最高最低价上。

var text= 
{ 
    name:'MULTI_TEXT', type:1, 
    Draw: 
    { 
        DrawType:'MULTI_TEXT', 
        DrawData: 
        [
            {Date:20190916, Value:15.5, Text:'1',Color:'rgb(0,255,50)'},
            {Date:20201202, Value:15.4,Text:'2',Color:'rgb(0,55,50)'} , 
            {Date:20210106, Value:23.6, Text:'3'},
            { Date:20201228, Value:"L", Text:'66', Color:'rgb(255,0,0)',Baseline:1 },
            { Date:20210128, Value:"H", Text:'77', Color:'rgb(255,0,0)',Baseline:2 },
        ]
    } //绘制文字
};

示例地址

https://jones2000.github.io/HQChart/webhqchart.demo/samples/demo_MULTI_TEXT.html

HQChart代码地址

地址：github.com/jones2000/HQChart

个人爱好(模型/摄影)