发表自话题：怎么画k线图

HQChart使用教程30-K线图如何对接第3方数据11-如何绘制多组自定义图标

效果图步骤1.创建iconfont文件2. 配置一个第3方指标3. 网络协议回调计算指标自定义图标json格式nametypeDrawDraw.DrawTypeDraw.DrawDataDraw.DrawData.FamilyDraw.DrawData.IconDraw.DrawData.Line图标显示在K线最高/最低价上完整demo地址交流QQ群: 950092318HQChart代码地址个人爱好(模型/摄影)

使用自定义svg图标显示再指标上，这里我们只支持svg图片，其他的格式图片不支持。

效果图

步骤

1.创建iconfont文件

这里我使用阿里巴巴矢量图标库来创建几个svg图标。Famail名字为js-iconfont, 导入几个图标

2. 配置一个第3方指标

这里我新配置一个指标名为‘SVG图标标记’的指标

var option= { Type:'历史K线图', ........................ Windows: [ { Index:'SVG图标标记', API: { Name:'SVG图标标记', Script:null, Args:null, Url:'http://127.0.0.1:18080/api/jsindex' //随便填 但不能为空 } }, { Index:"MACD", }, ], //窗口指标 ................................ }

3. 网络协议回调计算指标

再NetworkFilter回调中， 我们自己计算 ‘SVG图标标记’ 指标

data.Name 可以获取当前是哪个网络协议
request.Data.indexname 用来获取当前是那个远程指标
这里使用timeout来模拟异步指标计算

function NetworkFilter(data, callback) { console.log('[NetworkFilter] data', data); if (data.Name=='APIScriptIndex::ExecuteScript') { var request=data.Request; if (request.Data.indexname=='SVG图标标记') { data.PreventDefault=true; setTimeout(()=> { var hqchart=data.HQChart; var kData=hqchart.ChartPaint[0].Data; var closeLine={name:'收盘价线', type:0, data:kData.GetClose() }; var line2= { name:'MULTI_SVGICON', type:1, Draw: { DrawType:'MULTI_SVGICON', DrawData: { Family:'js-iconfont', Icon: [ { Date:20190916, Value:15.5, Symbol:'\ue611', Color:'rgb(240,0,0)', Baseline:1 }, //0 居中 1 上 2 下 { Date:20190919, Value:15.3, Symbol:'\ue615', Color:'rgb(240,240,0)',Baseline:2 }, { Date:20190909, Value:15.4, Symbol:'\ue615', Color:'rgb(240,100,30)'} ] } } //绘制图标数组 }; var apiData= { code:0, stock:{ name:hqchart.Name, symbol:hqchart.Symbol }, outdata: { date:kData.GetDate() , outvar:[closeLine,line2] } }; console.log('[NetworkFilter::NetworkFilter] apiData ', apiData); callback(apiData); }, 500); } } }

自定义图标json格式

name

‘MULTI_SVGICON’ 固定

type

1 固定

Draw

图标及坐标信息

Draw.DrawType

MULTI_SVGICON 固定

Draw.DrawData

个个图标的位置

Draw.DrawData.Family

对应iconfont 的family名字

Draw.DrawData.Icon

图标数组 一项对应1个图标

{
Date:（格式:yyyymmdd)在X轴的日期,
Time: (格式hhmm)在X轴的时间(分钟才有效),
Value:Y轴坐标值
Symbol:图标字符,
Color:颜色(可选),
Baseline:上下对齐方式 0=居中, 1=上,2=下,
Line:{ 文字与最高最低价连线(可选） }
}

Draw.DrawData.Line

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

图标显示在K线最高/最低价上

Draw.DrawData.Icon.Value 设置为"H",或"L" 就可以直接对应这个K线的最高最低价上了

var line2= { name:'MULTI_SVGICON', type:1, Draw: { DrawType:'MULTI_SVGICON', DrawData: { Family:'js-iconfont', Icon: [ { Date:20190916, Value:15.5, Symbol:'\ue611', Color:'rgb(240,0,0)', Baseline:1 }, //0 居中 1 上 2 下 { Date:20190919, Value:15.3, Symbol:'\ue615', Color:'rgb(240,240,0)',Baseline:2 }, { Date:20201202, Value:15.4, Symbol:'\ue615', Color:'rgb(240,100,30)',Line:{Color:"rgb(65,105,225)", KData:"L", Width:3, Offset:[3,15],Dash:[5,5]}}, { Date:20210106, Value:23.6, Symbol:'\ue611', Color:'rgb(240,100,30)',Line:{Color:"rgb(139,101,8)", KData:"H", Width:3, Offset:[3,15],Dash:[5,5]}}, { Date:20201228, Value:"L", Symbol:'\ue615', Color:'rgb(240,240,0)',Baseline:1 }, { Date:20210128, Value:"H", Symbol:'\ue615', Color:'rgb(240,240,0)',Baseline:2 }, ] } } //绘制图标数组 };

完整demo地址

github.com/jones2000/HQChart/blob/master/webhqchart.demo/demo/phone26.html

交流QQ群: 950092318

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

HQChart代码地址

地址：github.com/jones2000/HQChart

个人爱好(模型/摄影)

标签组：[date] 

上一篇：Python+pyqtgraph：跟我学如何绘制股票K线图

下一篇：python 获取股市数据 baostock + 画K线图 mpl