需求

我们需要在某几天的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.RequestIndexData(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页面

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">  
<head>  
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  

<title>K线图-彩色K线</title>  
    <!-- 加载资源 -->
    <link rel="stylesheet" href="../jscommon/umychart.resource/css/tools.css" />
    <link rel="stylesheet" href="../jscommon/umychart.resource/font/iconfont.css" />
    <link rel="stylesheet" href="phone26_iconfont.css" />
</head>  
<body>
    <div id="kline" style="width: 900px;height:400px;position: relative;"></div>

    <script src="content/js/jquery.min.js"></script>
    <script src="content/js/webfont.js"></script>
    <script src='../jscommon/umychart.console.js'></script>     <!-- 日志输出 -->
    <script src="../jscommon/umychart.network.js"></script>     <!-- 网络请求分装 -->
    <script src="../jscommon/umychart.js"></script>             <!-- K线图形 -->
    <script src="../jscommon/umychart.complier.js"></script>    <!-- 麦语言解析执行器 -->
    <script src="../jscommon/umychart.index.data.js"></script>  <!-- 基础指标库 -->
    <script src="../jscommon/umychart.style.js"></script>       <!-- 白色风格和黑色风格配置信息 -->
    
    <script>

        //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 年线 
                    MaxReqeustDataCount:1000,   //数据个数
                    MaxRequestMinuteDayCount: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=HQChartStyle.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.RequestIndexData(data,callback);
                        break;
                }
            }

            this.RequestIndexData=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::RequestIndexData] 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();
        })

    </script>  
</body>  
</html>



<style>

/*
.klineframe-toolbar
{
    color:rgb(238,233,233);
}

.klineframe-toolbar span:hover
{
    color: #0182d4;
}
*/
    
</style>

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

HQChart代码地址

地址：github.com/jones2000/HQChart

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