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

最新推荐文章于 2024-07-25 10:17:59 发布

HQChart

最新推荐文章于 2024-07-25 10:17:59 发布

阅读量1.7k

点赞数

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

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

版权

HQChart 同时被 2 个专栏收录

169 篇文章

订阅专栏

JavaScript

151 篇文章

订阅专栏

如何快速创建一个横屏分时图页面

demo页面代码
Option的配置项说明
HQChart代码地址

效果图

这个页面是x,y 对调画在画布上，不依赖于手机是否横屏状态，一般用在app中，需要app中禁止横屏。只支持手机端

demo页面代码

git下载代码在webhqchart.demo\demo 目录下创建一个test2.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>页面行情(K线图)</title>  
    <!-- 加载资源 -->
    <link rel="stylesheet" href="content/css/tools.css" />
    <link rel="stylesheet" href="../jscommon/umychart.resource/font/iconfont.css" />
</head>  
<body>
    <div id="divminute" 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.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>

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


            //分时图配置信息
            this.Option= {
                Type:'分钟走势图横屏',   //创建图形类型
                
                Windows: //窗口指标
                [
                    {Index:"MACD", Modify:false,Change:false},
                ], 
                
                Symbol:'000001.sz',
                IsAutoUpdate:true,       //是自动更新数据
                DayCount:1,                     //1 最新交易日数据 >1 多日走势图
                IsShowCorssCursorInfo:true,    //是否显示十字光标的刻度信息
                IsShowRightMenu:true,       //是否显示右键菜单
    
                MinuteLine:
                {
                    IsDrawAreaPrice:false,      //是否画价格面积图
                },

                KLineTitle: //标题设置
                {
                    IsShowName:true,       //不显示股票名称
                    IsShowSettingInfo:true //不显示周期/复权
                },
    
                Border: //边框
                {
                    Left:20,    //左边间距
                    Right:20,     //右边间距
                    Top:50,
                    Bottom:50
                },
                
                Frame:  //子框架设置
                [
                    {SplitCount:5,StringFormat:0},
                    {SplitCount:3,StringFormat:0},
                    {SplitCount:3,StringFormat:0},
                ],

                Overlay:    //叠加股票 目前只支持1只股票
                [
                    //{Symbol:'000001.sh'}
                ]

            };
                 
            this.Create=function()  //创建图形
            {
                var self=this;
                $(window).resize(function() { self.OnSize(); });    //绑定窗口大小变化事件

                this.OnSize();  //让分时图全屏
                this.Chart.SetOption(this.Option);  //设置配置
            }

            this.OnSize=function()  //自适应大小调整
            {
                var height= $(window).height();
                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();
            }
        }

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

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

Option的配置项说明

Type： 图形类型，这里填分钟走势图横屏代表创建一个横屏分时图
Border 分时图坐标边框与四周间距这个和K线图是一样的
在这里插入图片描述
其他属性和横屏的分时图一样，详见
HQChart使用教程7- 如何快速创建一个分时图页面 https://blog.csdn.net/jones2000/article/details/90319619