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

HQChart使用教程30-K线图如何对接第3方数据19-如何绘制彩色K线柱

需求步骤1. 配置一个第3方指标2. 配置NetworkFilter3. 对接自己的指标数据彩色K线数据格式name:Color:DrawDataKLine完成实例代码如果还有问题可以加交流QQ群: 950092318HQChart代码地址

需求

我们需要在某几天的K线使用不同颜色来显示，已达到醒目的效果
效果图如下

步骤

1. 配置一个第3方指标

使用SetOption 来配置一个第3方指标
这里我把这个指标取名为"彩色K线"

//K线配置信息 this.Option= { Type:'历史K线图', //创建图形类型 Windows: //窗口指标 [ //{Index:"EMPTY"}, { Index:'彩色K线', API: { Name:'彩色K线', Script:null, Args:null, Url:'http://127.0.0.1:18080/api/jsindex' } }, {Index:"VOL", Modify:true,Change:false}, ], .......

2. 配置NetworkFilter

我们通过NetworkFilter网络协议回调来截获‘APIScriptIndex::ExecuteScript’这个指标协议

this.Option.NetworkFilter=(data, callback) => { this.NetworkFilter(data, callback); } , //绑定网络协议回调 this.Chart.SetOption(this.Option); //设置K线配置 ......... this.NetworkFilter=function(data, callback) { console.log('[KLineChart::NetworkFilter] data', data); switch(data.Name) { case 'APIScriptIndex::ExecuteScript': //处理指标 console.log('[KLineChart::NetworkFilter] index name ',data.Request.Data.indexname); this.Re(data,callback); break; } }

3. 对接自己的指标数据

把自己的指标数据转成hqchart指标数据， 把通过回调传给hqchart.

彩色K线数据格式

name:

固定填 “COLOR_KLINE”

Color:

K线默认颜色， 如果下面单个K线不设置颜色 就使用这个颜色

DrawData

彩色K数据

KLine

需要设置彩色K线的数组
Date: 日期
Time: 时间 （分钟K线才使用)
Color:K线颜色 ，如果不填 就使用外层Color颜色

var colorKlineData= { name:'COLOR_KLINE', type:1, Draw: { DrawType:"COLOR_KLINE", Color:'rgb(255,0,255)', //默认颜色 DrawData: { KLine: [ {Date:20190916, Color:'rgb(255,140,0)'}, //Color 可选， 不设置 使用外层Color颜色 {Date:20190919, Color:'rgb(0,0,255)'}, {Date:20190909, Color:'rgb(72,61,139)'}, {Date:20200303 }, {Date:20200304 }, {Date:20200305 }, ] } } }

完成实例代码

这个实例有2组数据 一个组图标一个组彩色K线
demo页面

K线图-彩色K线 //JSConsole.Chart.Log=() =>{} //JSConsole.Complier.Log=()=>{} /* MARKET_SUFFIX_NAME.GetMarketStatus = function (symbol) { return 2; } */ //简单的把K线控件封装下 function KLineChart(divKLine) { this.DivKLine=divKLine; this.Chart=JSChart.Init(divKLine); //把K线图绑定到一个Div上 this.Barrage; //弹幕输出控制器 //K线配置信息 this.Option= { Type:'历史K线图', //创建图形类型 Windows: //窗口指标 [ //{Index:"EMPTY"}, { Index:'彩色K线', API: { Name:'彩色K线', Script:null, Args:null, Url:'http://127.0.0.1:18080/api/jsindex' } }, {Index:"VOL", Modify:true,Change:false}, ], Symbol:'600000.sh', IsAutoUpdate:true, //是自动更新数据 AutoUpdateFrequency:3000, //数据更新频率 //TradeIndex: {Index:'交易系统-BIAS'}, //交易系统 IsShowRightMenu:true, //右键菜单 IsShowCorssCursorInfo:true, //是否显示十字光标的刻度信息 //CorssCursorTouchEnd:true, KLine: //K线设置 { DragMode:1, //拖拽模式 0 禁止拖拽 1 数据拖拽 2 区间选择 Right:1, //复权 0 不复权 1 前复权 2 后复权 Period:0, //周期 0 日线 1 周线 2 月线 3 年线 MaxRe:1000, //数据个数 MaxRe:10, //分钟数据取5天 PageSize:50, //一屏显示多少数据 //Info:["互动易","大宗交易",'龙虎榜',"调研","业绩预告","公告"], //信息地雷 IsShowTooltip:true, //是否显示K线提示信息 DrawType:0, //K线类型 0=实心K线柱子 1=收盘价线 2=美国线 3=空心K线柱子 4=收盘价面积图 //FirstShowDate:20161201, KLineDoubleClick:false, //禁止双击弹框 }, KLineTitle: //标题设置 { IsShowName:true, //不显示股票名称 IsShowSettingInfo:true //不显示周期/复权 }, Border: //边框 { Left:5, //左边间距 Right:60, //右边间距 Bottom:25, //底部间距 Top:25 //顶部间距 }, Frame: //子框架设置 [ {SplitCount:3,StringFormat:0, IsShowLeftText:false}, {SplitCount:2,StringFormat:0, IsShowLeftText:false, }, {SplitCount:2,StringFormat:0, IsShowLeftText:false} ], ExtendChart: //扩展图形 [ //{Name:'KLineTooltip' } //手机端tooltip ], Overlay: [ // {Symbol:'399300.sz', DrawType:1, Color:'rgb(0,0,255)'} ], }; this.Create=function() //创建图形 { var self=this; $(window).resize(function() { self.OnSize(); }); //绑定窗口大小变化事件 var blackStyle=H.GetStyleConfig(STYLE_TYPE_ID.BLACK_ID); //读取黑色风格配置 //JSChart.SetStyle(blackStyle); //this.DivKLine.style.backgroundColor=blackStyle.BGColor; //设置最外面的div背景 this.Option.NetworkFilter=(data, callback) => { this.NetworkFilter(data, callback); } , //绑定网络协议回调 this.OnSize(); //让K线全屏 this.Chart.SetOption(this.Option); //设置K线配置 } this.OnSize=function() //自适应大小调整 { var height= $(window).height(); var width = $(window).width(); this.DivKLine.style.top='px'; this.DivKLine.style.left='px'; this.DivKLine.style.width=width+'px'; this.DivKLine.style.height=height+'px'; this.Chart.OnSize(); } this.NetworkFilter=function(data, callback) { console.log('[KLineChart::NetworkFilter] data', data); switch(data.Name) { case 'APIScriptIndex::ExecuteScript': //处理指标 console.log('[KLineChart::NetworkFilter] index name ',data.Request.Data.indexname); this.Re(data,callback); break; } } this.Re=function(data,callback) { var request=data.Request; if (request.Data.indexname!='彩色K线') return; var hqchart=data.HQChart; //var kData=hqchart.ChartPaint[0].Data; //var closeLine={name:'收盘价线', type:0, data:kData.GetClose() }; var svgData= { name:'MULTI_SVGICON', type:1, Draw: { DrawType:'MULTI_SVGICON', DrawData: { Family:'js-iconfont', Icon: [ { Date:20190916, Value:12.5, Symbol:'\ue611', Color:'rgb(240,0,0)', Baseline:1 }, //0 居中 1 上 2 下 { Date:20190919, Value:11.3, Symbol:'\ue615', Color:'rgb(240,240,0)',Baseline:2 }, { Date:20190909, Value:11.4, Symbol:'\ue615', Color:'rgb(240,100,30)'} ] } } //绘制图标数组 }; var colorKlineData= { name:'COLOR_KLINE', type:1, Draw: { DrawType:"COLOR_KLINE", Color:'rgb(255,0,255)', //默认颜色 DrawData: { KLine: [ {Date:20190916, Color:'rgb(255,140,0)'}, //Color 可选， 不设置 使用外层Color颜色 {Date:20190919, Color:'rgb(0,0,255)'}, {Date:20190909, Color:'rgb(72,61,139)'}, {Date:20200303 }, {Date:20200304 }, {Date:20200305 }, ] } } } var apiData= { code:0, stock:{ name:hqchart.Name, symbol:hqchart.Symbol }, //outdata: { date:kData.GetDate() , outvar:[closeLine,line2] } outdata: { outvar:[svgData,colorKlineData] } }; data.PreventDefault=true; console.log('[KLineChart::Re] apiData ', apiData); callback(apiData); } } $(function () { WebFont.load({ custom: { families: ['iconfont'] } }); //预加载下iconfont资源 WebFont.load({ custom: { families: ['js-iconfont'] } }); var klineControl=new KLineChart(document.getElementById('kline')); klineControl.Create(); }) /* .klineframe-toolbar { color:rgb(238,233,233); } .klineframe-toolbar span:hover { color: #0182d4; } */

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

HQChart代码地址

地址：github.com/jones2000/HQChart

标签组：[date] [callback] 

上一篇：WPF中使用amCharts绘制股票K线图

下一篇：K线图、均线与成交量绘制