需求

我们有的时候需要在K线图右侧绘制一个面积图，并和K线图共享一个Y轴坐标。

效果图

在这里插入图片描述

demo页面

demo
手机横屏demo

步骤

1. 配置一个深度图

在option里面的扩展属性里面配置一个深度图, 并且让K线图右边预留150的宽度用来绘制面积图

this.Option= {
  Type:'历史K线图',   //创建图形类型
  
  Windows: //窗口指标
  [
      {Index:"MA", Modify:true,Change:false},
      {Index:"VOL", Modify:true,Change:false},
     
  ], 
  
Border: //边框
 {
      Left:5,         //左边间距
      Right:150,       //右边间距 右边留150宽度绘制深度图
      Bottom:25,      //底部间距
      Top:25          //顶部间距
  },
  ......
 ExtendChart:    //扩展图形
 [
      //{Name:'KLineTooltip' }  //手机端tooltip
      { Name:"深度图", FrameID:0,  ID:0 },    //深度图
  ]
}

参数说明：
Name: 固定：深度图
FrameID: 对应绘制指标窗口的索引上，这里我们把面积图绘制在第1个指标窗口右边
ID: key, 唯一的标识, 用来设置设置数据的时候用的。（可以缺省)
Width: 面积图宽度(可以缺省，默认200）

2. 设置数据

设置数据接口
SetDepthMapData( data, isDraw)
data: 面积图配置信息及数据， data 支持设置多个面积图
isDraw: 是否立即重绘

3. 数据格式

数据格式:
[
{
Data:[ {X:对应K线Y轴的数值, Y:横向数值 }, ],
Type: 0 固定值
LineColor: 线段颜色
AreaColor: 面积颜色支持渐近色
TextColor: 十字光标输出文字颜色
TextBGColor：十字光标输出文字背景色
IsShowCorssCursor:true/false; //是否显示十字光标的提示信息
},
]

this.RecvDepthMapData=function()
    {
        //使用默认的颜色配置
        var buyData=
        { 
           Data:[], 
           Type:0 
        };

        var sellData=
        { 
            Data:[], 
            Type:0 ,
            LineColor:'rgba(255,165,0,0.6)',
            AreaColor:['rgba(255,165,0,0.5)','rgba(255,165,0,0.4)','rgba(255,165,0,0.3)','rgba(255,165,0,0.2)'],
            TextColor:'rgb(248,248,255)',
            TextBGColor:"rgb(255,165,0)"
        };

        //5-12 每个价位的买量
        for(var i=5, j=0;i<=12;i+=0.01, ++j)
        {
            var item={X:i, Y:parseInt((Math.random()+1)*100)*10000 };
            if (j%10) item.YText=`买:${item.Y}`;
            buyData.Data.push(item);
        }
        
        //12-15 每个价位的卖量
        for(var i=12, j=0;i<15;i+=0.01,++j)
        {
            var item={X:i, Y:parseInt((Math.random()+1)*100)*10000 };
            if (j%10) item.YText=`卖:${item.Y}`;
            sellData.Data.push(item);
        }

        var data=[buyData,sellData]; //设置2个面积图
        
        this.Chart.SetDepthMapData([{ID:0, Data:data}], true); //ID：对应前面配置深度图的时候设置的ID
    }

完整实例代码：

<!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线图+深度图</title>  
    <!-- 加载资源 -->
    <link rel="stylesheet" href="../jscommon/umychart.resource/css/tools.css" />
    <link rel="stylesheet" href="../jscommon/umychart.resource/font/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上

            //K线配置信息
            this.Option= {
                Type:'历史K线图',   //创建图形类型
                
                Windows: //窗口指标
                [
                    //{Index:"EMPTY"},
                    {Index:"MA", Modify:true,Change:false},
                    {Index:"VOL", Modify:true,Change:false},
                    //{Index:"MACD", Modify:true,Change:false},
                    //{Index:"RSI", Modify:false,Change:false}, 
                ], 

                
                OverlayIndex:
                [
                    //{Index:'VOL', Windows:0 },
                    //{Index:'MACD', Windows:0 },
                    //{Index:'MA', Windows:1 }
                ],  //叠加指标

                OverlayIndexFrameWidth:50,
                
                
                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:150,       //右边间距
                    Bottom:25,      //底部间距
                    Top:25          //顶部间距
                },
                
                Frame:  //子框架设置
                [
                    {SplitCount:3,StringFormat:0, IsShowLeftText:false, RightTextPosition:0 },
                    {SplitCount:2,StringFormat:0, IsShowLeftText:false},
                    {SplitCount:2,StringFormat:0, IsShowLeftText:false}
                ],

                ExtendChart:    //扩展图形
                [
                    //{Name:'KLineTooltip' }  //手机端tooltip
                    { Name:"深度图", FrameID:0,  ID:0 },    //深度图
                ]
            };
                 
            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.OnSize();  //让K线全屏
                this.Chart.SetOption(this.Option);  //设置K线配置

                setTimeout(() => { this.RecvDepthMapData() }, 5000);
            }

            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.RecvDepthMapData=function()
            {
                //使用默认的颜色配置
                var buyData=
                { 
                   Data:[], 
                   Type:0 
                };

                var sellData=
                { 
                    Data:[], 
                    Type:0 ,
                    LineColor:'rgba(255,165,0,0.6)',
                    AreaColor:['rgba(255,165,0,0.5)','rgba(255,165,0,0.4)','rgba(255,165,0,0.3)','rgba(255,165,0,0.2)'],
                    TextColor:'rgb(248,248,255)',
                    TextBGColor:"rgb(255,165,0)"
                };

                for(var i=5, j=0;i<=12;i+=0.01, ++j)
                {
                    var item={X:i, Y:parseInt((Math.random()+1)*100)*10000 };
                    if (j%10) item.YText=`买:${item.Y}`;
                    buyData.Data.push(item);
                }

                for(var i=12, j=0;i<15;i+=0.01,++j)
                {
                    var item={X:i, Y:parseInt((Math.random()+1)*100)*10000 };
                    if (j%10) item.YText=`卖:${item.Y}`;
                    sellData.Data.push(item);
                }

                var data=[buyData,sellData];


                this.Chart.SetDepthMapData([{ID:0, Data:data}], true);
       
            }
        }

        $(function () 
        {
            WebFont.load({ custom: { families: ['iconfont'] } });   //预加载下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使用教程58 - 如何在K线右侧绘制面积图(如深度图)

HQChart使用教程58 - 如何在K线右侧绘制面积图

需求

效果图

demo页面

步骤

1. 配置一个深度图

2. 设置数据

3. 数据格式

猜你喜欢