HQChart使用教程7- 如何快速创建一个分时图页面

HQChart

已于 2023-12-27 16:38:06 修改

阅读量5.8k

点赞数 1

分类专栏： JavaScript HQChart 文章标签：分时图 H5 指标

于 2019-05-18 20:03:48 首次发布

本文链接：https://blog.csdn.net/jones2000/article/details/90319619

版权

HQChart 同时被 2 个专栏收录

169 篇文章

订阅专栏

JavaScript

151 篇文章

订阅专栏

本文围绕HQChart分时图展开，介绍了demo页面代码、品种代码后缀。详细说明了Option配置项，包括图形类型、股票代码、自动更新等设置。还提及隐藏成交量图、动态切换多日图、鼠标滚动与双击事件处理，以及自定义颜色等内容，并给出了HQChart代码地址。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

效果图

demo页面代码

https://github.com/jones2000/HQChart/blob/master/webhqchart.demo/samples/chart_minute.html

<!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 http-equiv="Content-Type" content="text/html; charset=utf-8" />  
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<title>分时图</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="//at.alicdn.com/t/font_1196214_0bk7uvfe17nq.css"/> -->
</head>  
<body>
    <div id="divminute" style="width: 900px;height:400px;position: relative;">
    </div>

    <div>
        <span id='button_3' class="btn-style">5日</span>
        <span id='button_4' class="btn-style">1日</span>
        <span id='button_7' class="btn-style">MACD</span>
    </div>

    <script src="../jscommon/umychart.resource/js/jquery.min.js"></script>
    <script src="../jscommon/umychart.resource/js/webfont.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 src="../jscommon/umychart.NetworkFilterTest.js"></script>
    
    <script>
        MARKET_SUFFIX_NAME.GetMarketStatus=(symbol) => { return 2; }//一直交易

        //简单的把分时控件封装下
        function MinuteChart(divMinute)
        {
            this.DivMinute=divMinute;
            this.Chart=JSChart.Init(divMinute);   //把分时图绑定到一个Div上

            //分时图配置信息
            this.Option= {
                Type:'分钟走势图',   //创建图形类型
                //Type:'分钟走势图横屏',

                Windows: //窗口指标
                [
                    
                ], 

                OverlayIndex:
                [
                    //{Index:'KDJ', Windows:0, ShowRightText:false, IsShareY:true },
                ],  //叠加指标
                
                
                Symbol:'600000.sh',         // cf1909.czc
                IsAutoUpdate:true,          //是自动更新数据
                AutoUpdateFrequency:1000,   //数据更新频率
                DayCount:1,                     //1 最新交易日数据 >1 多日走势图
                IsShowRightMenu:true,       //是否显示右键菜单
                //CorssCursorTouchEnd:true,
               
                EnableSelectRect:true,
                EnableZoomIndexWindow:true,
               
                CorssCursorInfo:{  Left:2, Right:1, Bottom:1,RightTextFormat:0,IsFixXLastTime:true, RightButton:{ Enable:true } ,PriceFormatType:0,DataFormatType:0, },
    
               
               
                
                MinuteLine:
                {
                    IsDrawAreaPrice:true,      //是否画价格面积图
                    //IsShowAveragePrice:false,   //不显示均线
                    //SplitType:2,
                },

                MinuteTitle:
                {
                    IsShowTime:true,
                    IsShowName:true,
                    IsShowDate:false,
                    IsShowVolTitle:true,
                },

                MinuteVol:
                {
                    BarColorType:1,
                },

                Language:'CN',
                EnableBorderDrag:true,

                IsDrawPictureXY:true,

                SelectedChart:{ EnableSelected: true, EnableMoveOn:true },

                EnableIndexChartDrag:true,

                EnableSelectRect:true,
    
                Border: //边框
                {
                    Left:50,    //左边间距
                    Right:20,     //右边间距
                    Top:25,
                    Bottom:25,

                    AutoLeft:{ Blank:10, MinWidth:80 },
                    AutoRight:{ Blank:10, MinWidth:80 },
                },
                
                Frame:  //子框架设置
                [
                    { 
                        SplitCount:5,  IsShowLeftText:true, IsShowYLine:true,
                        Custom:
                        [
                            
                            { 
                                Type:0,  LineDash:[2,2], 
                                Position:'right', LineType:1
                            },
                            

                            { 
                                Type:1, 
                                LineDash:[3,2],
                                Position:'right',IsShowLine:true, LineType:1,PositionEx:0, LineWidth:1,
                                Data:
                                [
                                    {
                                        Value:7.13,
                                        Color:'rgb(208,32,144)', TextColor:'rgb(255,255,255)',    //Color:线段及文字背景色 TextColor:文字颜色
                                        Text:[{Text:"成本线"} , {Text:"价格:7.13"}]
                                    },
                                    {
                                        Value:7.20,
                                        Color:'rgb(72,61,139)', TextColor:'rgb(230,230,230)',    //Color:线段及文字背景色 TextColor:文字颜色
                                    }
                                ] 
                            },

                        ]
                    },
                    { SplitCount:5, },
                    { SplitCount:5,  },
                    { SplitCount:5, },
                ],

                Listener:
                {
                    //KeyDown:false,
                    //Wheel:false
                },

                Overlay:    //叠加股票 目前只支持1只股票
                [
                    //{Symbol:'603190.sh', OverlayType:1, IsCalcuateMaxMin:true, Color:"rgb(250,0,0)" },
                    //{Symbol:'000001.sz'}
                ],

                ExtendChart:    //扩展图形
                [
                    //{Name:'MinuteTooltip' }, //手机端tooltip
                    {Name:'MinutePCTooltip' }, //PC端tooltip
                    //{Name:"画图工具"}
                ]
            };
                 
            this.Create=function()  //创建图形
            {
                var self=this;
                $(window).resize(function() { self.OnSize(); });    //绑定窗口大小变化事件

                JSChart.EnableCanvasWillReadFrequently=true;
                var blackStyle=HQChartStyle.GetStyleConfig(STYLE_TYPE_ID.BLACK_ID); //读取黑色风格配置
                JSChart.SetStyle(blackStyle);
                this.DivMinute.style.backgroundColor=blackStyle.BGColor; //设置最外面的div背景
                var resource=JSChart.GetResource();
                resource.ToolbarButtonStyle=1;
                
                this.OnSize();  //让分时图全屏
                this.Option.NetworkFilter=(data, callback)=>{ HQData.NetworkFilter(data, callback); }
                this.Chart.SetOption(this.Option);  //设置K线配置

               
                
            }

            this.ChangeSymbol=function(symbol, option)
            {
               
                this.Chart.ChangeSymbol(symbol,option);
            }

            this.OnSize=function()  //自适应大小调整
            {
                var height= $(window).height()-30;
                var width = $(window).width();
                this.DivMinute.style.top='px';
                this.DivMinute.style.left='px';
                this.DivMinute.style.width=width+'px';
                this.DivMinute.style.height=height+'px';
                this.Chart.OnSize();
            }

           
            this.ChangeDayCount=function(dayCount)
            {
                this.Chart.ChangeDayCount(dayCount);
            }

            this.AddIndexWindow=function(indexName)
            {
                this.Chart.AddIndexWindow(indexName);
            }

        }

        $(function () 
        {
            WebFont.load({ custom: { families: ['iconfont'] } });   //预加载下iconfont资源
            var minuteControl=new MinuteChart(document.getElementById('divminute'));
            minuteControl.Create();

            //$("#button_1").click(function() { minuteControl.ChangeSymbol("000001.sz", { DayCount:5 }); } );
            //$("#button_2").click(function() { minuteControl.ChangeSymbol("688315.sh", { DayCount:1 }); } );

            $("#button_3").click(function() { minuteControl.ChangeDayCount(5); } );
            $("#button_4").click(function() { minuteControl.ChangeDayCount(1); } );

            $("#button_7").click(function() { minuteControl.AddIndexWindow("MACD"); } );

            //$("#button_8").click(function() { minuteControl.ReloadResource(); } );
        })

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



<style>

    #divminute
    {
        width: 900px;
        height:400px;
        position: relative;
        /*margin-top: 100px;*/
    }
    
    .btn-style
    {
        padding: 3px 8px;
        border: 1px solid #ececec;
        border-radius: 5px;
        background-color: #f5f5f5;
        cursor: pointer;
    }
    
        
    </style>

品种代码后缀

分时图需要在品种代码后面加上后缀才能被hqchart识别并找到对应的交易时间段. 品种后缀列表详见教程HQChart使用教程56-内置品种对应后缀列表说明

Option的配置项说明

上面的代码可以看到，所有分时图的设置都是通过Option来配置的。

Type

图形类型，这里填分钟走势图代表创建一个分时图

Symbol

显示的股票代码股票代码需要带后缀. 上海.sh 深证.sz

IsAutoUpdate

是否自动更新最新行情，如果是true, 会定时(30s/次)获取行情数据,更新分时图及指标
IsShowRightMenu: 是否显示右键菜单，如果是手机页面可以设置成false
在这里插入图片描述

DayCount

分时显示天数 1=当天分时图 2=2日分时图 3=3日分时图，最多10天，多日分时图就设置这个变量
在这里插入图片描述

Border

分时图坐标边框与四周间距这个和K线图是一样的
当Top<5时顶部的标题就不会显示
在这里插入图片描述

Minute

分时图设置

DragMode

2=区间选择
0=默认

Overlay

叠加股票 APP/小程序只支持1叠加1个股票, H5页面支持叠加多个股票.

Overlay:    //叠加股票 
[
    {Symbol:'603190.sh', OverlayType:1 },
    {Symbol:'000001.sz'}
    {Symbol:股票代码, OverlayType:叠加方式 0=百分比叠加 1=绝对叠加 缺省0， Color:线段颜色 缺省随机给颜色 }
],

下图叠加一个上证指数

MinuteLine

图形设置

IsDrawAreaPrice

MinuteLine.IsDrawAreaPrice 价格图是否使用面积图，下图是没有使用面积图显示价格
在这里插入图片描述

IsShowAveragePrice

MinuteLine.IsShowAveragePrice 是否显示均线

SplitType

MinuteLine.SplitType y轴最大最小计算方式
0=默认以前收盘为中轴上下最大最小值分割
1=根据涨跌停值分割通过MARKET_SUFFIX_NAME.GetLimitPriceRange()计算涨跌停价格
2=根据实际数据最大最大值分割

MinuteTitle

标题设置

IsShowName

MinuteTitle.IsShowName 是否显示品种名称默认是显示

IsShowTime

MinuteTitle.IsShowTime 标题是否显示时间

IsTitleShowLatestData

MinuteTitle.IsTitleShowLatestData 十字光标不在图形上，标题栏显示最后一个数据（默认false)

MinuteVol

副图（第2个图）成交量柱子设置

BarColorType

柱子颜色类型 0=红绿 1=红绿白（多个平盘状态），默认0

BarColorType=0
在这里插入图片描述
BarColorType=1

Windows

指标窗口，数组可以配置多个指标窗口，每个窗口单独设置，指标窗口是从第3个窗口开始。前面2个窗口是固定的一个是第1个价格图，第2个成交量图

Index

Index: 系统指标名字

Frame

指标窗口框架设置

SplitCount

SplitCount： Y轴刻度线个数

Height

Height：窗口高度比例

RightTextFormat

主图右侧坐标格式 0=百分比 1=价格

IsShowRightMenu

是否显示右键菜单 true/false

GlobalOption

XDateFormat

多日分时图底部日期显示格式，数值类型，默认0
0=MM-DD
1=MM/DD
2=MM/DD/Week

如何隐藏成交量图

分时图前面2个指标窗口写死的，第1个是价格走势图，第2个成交量 /（成交量+持仓）图。不能更改指标，如果需要隐藏第2个成交量图可以通过Frame的Height把高度设置成0 就可以隐藏调
注意: 这个功能HQChart版本号>=8288才有，老版本没有

 var option=
 {
     Type:'分钟走势图',
     .........
     Frame:  //子框架设置
      [
          {SplitCount:5},
          {SplitCount:3,Height:0 }, //第2个成交量图高度设置0隐藏掉
      ],

效果图：
在这里插入图片描述

动态切换多日图

在setoption以后，如果还需要动态通过按钮点击或菜单方式调整多日图显示天数可以通过接口来设置。
接口函数

 //多日走势图
 ChangeDayCount=function(count)

如切换4日分时图

this.Chart.ChangeDayCount(4);

鼠标滚动事件

默认分时图是没有鼠标中间的滚动轴上下滚动事件，你可以通过重载OnWheel来自己处理上下鼠标中轴滚动事件

this.Create=function()  //创建图形
{
     var self=this;
     $(window).resize(function() { self.OnSize(); });    //绑定窗口大小变化事件
     
     this.OnSize();  //让分时图全屏
     this.Chart.SetOption(this.Option);  //设置K线配置

     this.Chart.JSChartContainer.OnWheel=(e)=> { this.OnWheel(e); } //滚动事件绑定到自己要处理的函数里面
 }

 this.OnWheel=function(e)
 {
     console.log("[MinuteChart::OnWheel] e", e);
     //处理滚动事件
 }

鼠标双击事件

默认分时图不处理鼠标双击事件,可以通过外部来处理鼠标双击事件

this.Create=function()  //创建图形
{
     ..........
     this.Option.NetworkFilter=(data, callback)=>{ this.NetworkFilter(data, callback); }
     this.Chart.SetOption(this.Option);  //设置K线配置

     //外部处理双击事件
     this.Chart.JSChartContainer.UIOnDblClick=(e)=> {this.OnDBClick(e); }
 }

 this.OnDBClick=function(e)
 {
     console.log('[MinuteChart::OnDBClick] e', e);
 }

自定义成交量柱子颜色

默认成交量柱子颜色是红绿柱。如果要定制一个颜色，是修改全局资源配置。详见教程
HQChart使用教程4- 如何自定义K线图颜色风格
部分代码：

var resource=JSChart.GetResource();             
resource.Minute.VolBarColor="rgb(238,173,14)"; //自定义柱子颜色

..........................             
this.Chart.SetOption(this.Option);  //设置K线配置

在这里插入图片描述

渐变色面积图

var resource=JSChart.GetResource();
resource.Minute.AreaPriceColor=['rgba(255,0,0,0.5)',  'rgba(255, 228, 181,0.5)', "rgba(72 ,118 ,255,0.3)"];
..........
this.Chart.SetOption(this.Option);  //设置K线配置

在这里插入图片描述

自定义X轴时间刻度文字颜色

版本1.9254以后的才支持
默认使用颜色FrameSplitTextColor。如果要定制一个颜色，可以修改全局资源配置。详见教程
HQChart使用教程4- 如何自定义K线图颜色风格
这个颜色是K线图和分时图公用的, 如果要单独修改分时图颜色, 使用Minute.FrameSplitTextColor

var resource=JSChart.GetResource();
resource.Minute.FrameSplitTextColor='rgb(55,20,147)';
..........
this.Chart.SetOption(this.Option);  //设置K线配置

在这里插入图片描述

PC端Toolitip

PC端tooltip跟通达信保持一致
在这里插入图片描述
在setoption里面配置就可以

this.Option=
{
	ExtendChart:    //扩展图形
    [
         //{Name:'MinuteTooltip' }, //手机端tooltip
         {Name:'MinutePCTooltip' }, //PC端tooltip
         
     ]
}