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

xiaoxiao2022-07-07 199

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

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>  <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

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

HQChart代码地址

地址：https://github.com/jones2000/HQChart

最新回复(0)