如何快速创建一个分时图页面
- Type
- Symbol
- IsAutoUpdate
- DayCount
- Border
- Minute
- DragMode
- Overlay
- MinuteLine
- IsDrawAreaPrice
- IsShowAveragePrice
- SplitType
- MinuteTitle
- IsShowName
- IsShowTime
- Windows
- Index
- Frame
- SplitCount
- Height
- RightTextFormat
- IsShowRightMenu
- 如何隐藏成交量图
- 动态切换多日图
- 鼠标滚动事件
- 鼠标双击事件
- 自定义成交量柱子颜色
- 自定义X轴时间刻度文字颜色
- 交流QQ群
- HQChart代码地址
- 个人爱好(模型/摄影)
效果图
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="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.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, //是否画价格面积图
},
Border: //边框
{
Left:50, //左边间距
Right:50, //右边间距
Bottom:25, //底部间距
Top:25 //顶部间距
},
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('kline'));
minuteControl.Create();
})
</script>
</body>
</html>
品种代码后缀
分时图需要在品种代码后面加上后缀才能被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页面支持叠加多个股票. 下图叠加一个上证指数
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 标题是否显示时间
Windows
指标窗口，数组可以配置多个指标窗口， 每个窗口单独设置， 指标窗口是从第3个窗口开始。 前面2个窗口是固定的一个是第1个价格图，第2个成交量图
Index
Index: 系统指标名字
Frame
指标窗口框架设置
SplitCount
SplitCount： Y轴刻度线个数
Height
Height： 窗口高度比例
RightTextFormat
主图右侧坐标格式 0=百分比 1=价格
IsShowRightMenu
是否显示右键菜单 true/false
如何隐藏成交量图
分时图前面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线配置
自定义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线配置
交流QQ群
基本的分时图设置就介绍到这里， 如果还又问题可以加交流QQ群: 950092318
HQChart代码地址
地址：https://github.com/jones2000/HQChart
个人爱好(模型/摄影)
