快速创建一个K线图页面
- HQChart介绍
- 插件源码地址
- demo页面代码
- Option的配置项说明
- Type
- Symbol
- IsAutoUpdate
- IsShowRightMenu
- IsShowCorssCursorInfo
- IsApiPeriod
- KLine
- KLineTitle
- Border
- AutoLeft, AutoRight
- Windows
- Frame
- StepPixel
- ZoomStepPixel
- SplashTitle
- EnableZoomUpDown
- EnableYDrag
- OnCreatedCallback
- Listener
- EnableZoomIndexWindow
- IsDrawPictureXY
- K线Ctrl+(left/right)快速移动步长
- SelectedChart
- EnableIndexChartDrag
- ToolbarButtonStyle
- EnableBorderDrag
- ScriptError
- CustomShow
- EnableResize
- KLineTooltip
- PopMinuteChart
- Listener
- DragSelectRect
- css样式配置
- 第3方数据对接
- 个人爱好(模型/摄影)
效果图

HQChart介绍
功能: 提供K线,走势图, 支持通达信语法指标(麦语法), 画图工具,等等…
支持PC端页面, 小程序,手机端页面。
插件源码地址
https://github.com/jones2000/HQChart
demo页面代码
https://github.com/jones2000/HQChart/blob/master/webhqchart.demo/samples/chart_kline.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 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" >
</div>
<div>
<span id="button_1" class="btn-style">日</span>
<span id="button_2" class="btn-style">周</span>
<span id="button_3" class="btn-style">月</span>
<span id="button_4" class="btn-style">1M</span>
<span id="button_5" class="btn-style">5M</span>
<span id="button_6" class="btn-style">15M</span>
<span id='button_7' class="btn-style">RSI</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.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 src="../jscommon/umychart.NetworkFilterTest.js"></script>
<script>
MARKET_SUFFIX_NAME.GetMarketStatus = function (symbol) { return 2; }
//简单的把K线控件封装下
function KLineChart(divKLine)
{
this.DivKLine=divKLine;
this.Chart=JSChart.Init(divKLine, false, true); //把K线图绑定到一个Div上
//K线配置信息
this.Option= {
Type:'历史K线图', //创建图形类型
//Type:'历史K线图横屏',
//EnableBorderDrag:false,
Windows: //窗口指标
[
{Index:"MA" },
{Index:"MACD"},
{Index:"VOL"},
],
OverlayIndex:
[
//{ Index:'MA', Windows:0 , IsShareY:true, ShowRightText:false , IsShowIndexTitle:true, FloatPrecision:5 },
//{Index:'RSI', Windows:0, ShowRightText:false },
//{ Index:'BOLL', Windows:0, ShowRightText:true,IsShareY:true, ShowToolbar:true },
// {Windows:0, IndexName:"指标ID", Name:"自定义指标", Script:"DRAWTEXT(CLOSE<OPEN,H,14),VALIGN2,ALIGN1,YMOVE(-10), XMOVE(5);", Identify:"guid_66990",ShowRightText:true,IsShareY:true }
//{Index:'MA5', Windows:1 ,ShowRightText:true}
//{Index:"VOL_OVERLAY", Windows:0 },
], //叠加指标
//OverlayIndexFrameWidth:1,
//DragDownload: { Day:{ Enable:true } , Minute:{ Enable:true }},
EnableZoomUpDown:
{
//Wheel:false,
//Keyboard:false,
//Touch:false,
},
EnableYDrag:
{
Right:true,
Left:true,
},
//Language:'EN',
Symbol:"600000.sh",
IsAutoUpdate:true, //是自动更新数据
AutoUpdateFrequency:3000, //数据更新频率
//TradeIndex: {Index:'交易系统-BIAS'}, //交易系统
SplashTitle:'加载数据中......',
IsShowRightMenu:true, //右键菜单
//CorssCursorTouchEnd:true,
//IsClickShowCorssCursor:true,
//IsCorssOnlyDrawKLine:true,
CtrlMoveStep:10,
//EnableVerifyRecvData:true,
CorssCursorInfo: { Right:2, DateFormatType:3, HPenType:1, VPenType:1, IsShowClose:false, VLineType:0,RightButton:{ Enable:true }, IsShowCorss:true, PriceFormatType:0, DataFormatType:0 },
EnableZoomIndexWindow:true,
DrawTool: //画图工具
{
//StorageKey:'4E7EA133-D6C8-4776-9869-1DDDCC5FA744'
},
KLine: //K线设置
{
DragMode:1, //拖拽模式 0=禁止拖拽 1=数据拖拽 2=区间选择
Right:1, //复权 0 不复权 1 前复权 2 后复权
Period:0, //周期 0 日线 1 周线 2 月线 3 年线
MaxRequestDataCount:3000, //数据个数
MaxRequestMinuteDayCount:5, //分钟数据获取几天数据 默认取5天数据
//Info:["互动易","大宗交易",'龙虎榜',"调研","业绩预告","公告"], //信息地雷
//Info:["公告"],
IsShowTooltip:true, //是否显示K线提示信息
DrawType:0, //K线类型 0=实心K线柱子 1=收盘价线 2=美国线 3=空心K线柱子 4=收盘价面积图
//FirstShowDate:20161201,
RightSpaceCount:2,
ZoomType:0,
//PageSize:30, //一屏显示多少数据
DataWidth:10,
},
StepPixel:0,
IsDrawPictureXY:true,
Listener:
{
//KeyDown:false,
//Wheel:false
},
SelectedChart:{ EnableSelected: true, EnableMoveOn:true },
EnableIndexChartDrag:true,
KLineTitle: //标题设置
{
IsShowName:true, //不显示股票名称
IsShowSettingInfo:true, //不显示周期/复权
IsTitleShowLatestData:true,
},
EnableYDrag:
{
Right:true,
Left:true,
},
Border: //边框
{
Left:50, //左边间距
Right:90, //右边间距
Bottom:25, //底部间距
Top:25, //顶部间距
AutoLeft:{ Blank:10, MinWidth:60 },
AutoRight:{ Blank:5, MinWidth:60 },
},
Frame: //子框架设置
[
{
SplitCount:6,
Custom:
[
{
Type:0,
Position:'right',LineType:1,
//PositionEx:1,
},
{
Type:1,
Position:'right',IsShowLine:true, LineType:0,
//PositionEx:1,
Data:
[
{
Value:7.73,
Color:'rgb(0, 0 ,205)', TextColor:'rgb(255,255,255)', //Color:线段及文字背景色 TextColor:文字颜色
Text:[ {Text:"价格:9.73"}, {Text:"成本线"} ]
},
{
Value:6.50,
Color:'rgb(255 ,165, 79)', TextColor:'rgb(255,255,255)', //Color:线段及文字背景色 TextColor:文字颜色
}
]
},
{
Type:1,
Position:'right',IsShowLine:true,LineType:1,PositionEx:1, LineWidth:2, LineDash:[4,4],
Data:
[
{
Value:8.0,
Color:'rgb(255,185,255)', TextColor:'rgb(255,255,255)', //Color:线段及文字背景色 TextColor:文字颜色
},
{
Value:5.51,
Color:'rgb(255,185,0)', TextColor:'rgb(255,255,255)', //Color:线段及文字背景色 TextColor:文字颜色
}
]
}
]
},
{ SplitCount:5 },
{ SplitCount:4 }
],
ExtendChart: //扩展图形
[
//{Name:'KLineTooltip' }, //手机端tooltip
//{Name:"FrameSplitPaint", LineColor:"rgb(200,0,0)" }
],
Overlay:
[
//{Symbol:'399300.sz', DrawType:1, Color:'rgb(0,0,255)'},
//{ Symbol:'600999.sh' }
],
};
this.Create=function() //创建图形
{
var self=this;
//$(window).resize(function() { self.OnSize( {Type:1} ); }); //绑定窗口大小变化事件
$(window).resize(function() { self.OnSize( ); }); //绑定窗口大小变化事件
var blackStyle=HQChartStyle.GetStyleConfig(STYLE_TYPE_ID.BLACK_ID); //读取黑色风格配置
JSChart.SetStyle(blackStyle);
this.DivKLine.style.backgroundColor=blackStyle.BGColor; //设置最外面的div背景
JSChart.GetResource().ToolbarButtonStyle=1;
this.OnSize(); //让K线全屏
this.Option.NetworkFilter=(data, callback)=>{ HQData.NetworkFilter(data, callback); }
this.Chart.SetOption(this.Option); //设置K线配置
}
this.OnSize=function(option) //自适应大小调整
{
var height= $(window).height()-50;
var width = $(window).width();
//width=50000;
this.DivKLine.style.top='0px';
this.DivKLine.style.left='0px';
this.DivKLine.style.width=width+'px';
this.DivKLine.style.height=height+'px';
this.Chart.OnSize(option);
}
this.ChangeSymbol=function(symbol)
{
this.Chart.ChangeSymbol(symbol);
}
this.ChangeIndexCount=function()
{
//已经存在的指标不会改变,新的窗口使用option的配置指标
var option=
{
Windows:
[
{Index:"MA", Modify:true,Change:false},
{Index:"MACD2"},
{Index:"MACD",Modify:false, Change:true, Close:true,IsShowLeftText:false},
{Index:"VOL", Args:[ { Name:'M1', Value:6} ,{ Name:'M2', Value:8}] , Modify:false,Change:false, Close:true,IsShowLeftText:false },
],
};
this.Chart.ChangeIndexWindowCount(4,option);
}
this.OverlayIndex=function()
{
var option={WindowIndex:0, IndexName:"指标ID", Name:"自定义指标", Args:[{Name:"T", Value:5}],
Script:"T:MA(O,20);DRAWTEXT_LINE(O>C,13,'13.00',RGB(0,33,3), 10,1, RGB(0,255,0));", Identify:"guid_66990"};
//var option={WindowIndex:0, IndexName:"MACD", Identify:"guid_66990"};
this.Chart.AddOverlayIndex(option);
}
this.ChangeIndex=function(windowIndex,indexName,option)
{
this.Chart.ChangeIndex(windowIndex,indexName,option);
}
this.AddIndexWindow=function(indexName)
{
this.Chart.AddIndexWindow(indexName);
}
}
$(function ()
{
WebFont.load({ custom: { families: ['iconfont'] } }); //预加载下iconfont资源
var klineControl=new KLineChart(document.getElementById('kline'));
klineControl.Create();
$("#button_7").click(function() { klineControl.AddIndexWindow("RSI"); } );
$("#button_1").click(function() { klineControl.Chart.ChangePeriod(0); } );
$("#button_2").click(function() { klineControl.Chart.ChangePeriod(1); } );
$("#button_3").click(function() { klineControl.Chart.ChangePeriod(2); } );
$("#button_4").click(function() { klineControl.Chart.ChangePeriod(4); } );
$("#button_5").click(function() { klineControl.Chart.ChangePeriod(5); } );
$("#button_6").click(function() { klineControl.Chart.ChangePeriod(6); } );
})
</script>
</body>
</html>
<style>
#kline
{
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>
Option的配置项说明
上面的代码可以看到,所有K线图的设置都是通过Option来配置的。
Type
图形类型, 这里填历史K线图代表创建一个K线图
其他图形类型用下面的字符串
“历史K线图”
“历史K线图横屏”
“分钟走势图”
“分钟走势图横屏”
Symbol
显示的股票代码 股票代码需要带后缀. 上海.sh 深证.sz
IsAutoUpdate
是否自动更新最新行情,如果是true, 会定时(30s/次)获取行情数据,更新K线图及指标
IsShowRightMenu
是否显示右键菜单, 如果是手机页面可以设置成false
IsShowCorssCursorInfo
鼠标移动或手势的时候是否显示十字光标
IsApiPeriod
周期和复权数据是否全部使用api获取, 默认周期和复权是本地计算的 (false=周期数据是前端合并, true=周期和复权数据都使用后台api数据)
周期说明
1分钟K线和日K为原始数据, 其他周期数据都是可以通过原始数据合并得到。
合并周期可以在前端完成也可以在后台完成。hqchart对这2种模式都是支持的。
- 前端合并周期数据模式, 设置IsApiPeriod=false, 这样周期数据都是通过1分钟K线或日K数据由hqchart前端内置合并完成。切换周期除了1分钟K线和日K会触发数据请求, 其他周期切换不会触发数据请求。
- 后台合并数据模式. 设置IsApiPeriod=true, 前端不做合并操作, 直接使用后台的数据,每次切换周期都会请求后台周期数据。
KLine
KLine.DragMode
拖拽模式
0=禁止拖拽(禁止鼠标或手势左右拖动数据)
1=数据拖拽(可以用鼠标或手势左右拖动数据)
2=区间选择(拖动可以选择一段时间数据做区间统计,和形态匹配
3=长按十字光标显示保留/点击十字光标消失 (h5有效)
KLine.Right
复权 0=不复权 1=前复权 2=后复权 ** 不是股票的品种 设置成0 !!!!!!!!**
KLine.Period:
周期
0=日线 1=周线 2=月线 3=年线 9=季线 21=双周 [40001-50000) 自定义日线
4=1分钟 5=5分钟 6=15分钟 7=30分钟 8=60分钟 11=120分钟 12=240分钟 [20001-30000) 自定义分钟
10=分笔线 (小程序不支持)
30001-32000 自定义秒
50001-70000 自定义毫秒
KLine.ZoomType
1=以十字光标为中心缩放, 如果左或右边数据不过,适当调整中心的位置
KLine.MaxRequestDataCount
请求日K线数据的最大个数
KLine.PageSize
初始一屏显示几个K线,通过鼠标滚轴上下,键盘上下,手势两个手指上下可以调整一屏显示K线的个数
KLine.DataWidth
初始一屏显示的K线宽度。K线个数有K线宽度内部计算得到。 注意: PageSize / DataWidth 只能设置一模式
KLine.Info
信息地雷 目前支持“互动易",“大宗交易”,‘龙虎榜’,“调研”,“业绩预告”,“公告”, 可以选择其中的几个填上
KLine.InfoPosition
信息地雷图标显示的位置。 0=K线上面(默认) 1=底部。
底部的效果图
KLine.IsShowTooltip
是否使用创建内置的tooltip, 包含K线提示信息, 图标提示信息等等
KLine.DrawType
K线类型
0=实心K线柱子
1=收盘价线
2=美国线
3=空心K线柱子
4=收盘价面积图
5=订单流
6=完全空心K线柱子
7=订单流样式2
8=订单流样式3
9=自定义颜色K线
10=renko
11=Heikin Ashi
12=line break
13=high low
14=外部定制K线图
15=HLC Area
KLine.IsShowMaxMinPrice
K线上是否显示最大最小值 (版本>=7717)
KLine.RightSpaceCount
最后数据和右边框空白间距,空白的宽度=RightSpaceCount*k线宽度
(ver>=7756)
KLine.KLineDoubleClick(废弃)
是否启动双击K线弹出内置分时对话框. 默认是开启
废弃 使用PopMinuteChart配置
KLine.RightFormula
内置复权算法类型, 0=简单复权, 1=使用复权系数(复权因子)计算复权。缺省为0
** 只有在IsApiPeriod=false的时候才会使用前端计算复权, 否在都是后台计算复权**
KLine.PriceGap
显示未回补缺口
PriceGap:
{
Enable:true, //true=显示缺口 false=隐藏缺口
Count:3 //显示缺口个数
},
KLine.UnchangeBarType
十字星K线颜色 默认0
0=使用平盘的颜色
1=与昨收价比较 上涨红 下跌绿
KLineTitle
KLineTitle.IsShowName
K线标题是否显示股票名称
KLineTitle.IsShowSettingInfo
K线标题是否周期/复权
KLineTitle.TextSpace
标题文字间距 默认一个空格的间距(只支持小程序,app)
KLineTitle.DateTimeSpace
日期时间输出向后间距 (小程序才有)
KLineTitle.PeriodSpace
周期输出向后间距 (小程序才有)
KLineTitle.NameSpace
名称输出向后间距(小程序才有)
KLineTitle.IsTitleShowLatestData
十字光标不在图形上, 标题栏显示最后一个数据, 默认(false)
KLineTitle.ShowPostion
标题栏文字输出位置高级设置
ShowPostion:{ Margin:{ Bottom:10, Left:10 } }
Margin.Bottom 底部间距
Margin.Left 左边间距
KLineTitle.IsShowDateTime
K线标题栏是否显示日期和时间 (默认true)
Border
Border.Left, Border.Right,Border.Bottom,Border.Top 坐标边框到画布边框的间距
当Top<5时 顶部的标题就不会显示
当Bottom<5 底部不显示X轴日期刻度文字
AutoLeft, AutoRight
10226版本以后才支持
根据刻度文字自适应左边或右边边框间距
{Blank: 留白宽度, MinWidth:最小宽度 }
这个设置必须是Left>10 或者Right>10才有效, 只支持刻度在边框外部显示的模式
Border: //边框
{
Left:30, //左边间距
Right:30, //右边间距
Bottom:25, //底部间距
Top:25, //顶部间距
AutoLeft:{ Blank:10, MinWidth:30 },
AutoRight:{ Blank:10, MinWidth:30 },
},
Windows
指标窗口,数组可以配置多个指标窗口, 每个窗口单独设置
Index
系统指标名字
Modify
是否显示修改指标参数按钮
Change
是否可以切换股票
Close
是否显示关闭指标窗口按钮
更多指标窗口配置详见 HQChart使用教程49-指标配置项说明
OverlayIndexType
叠加指标设置
{
Position:指标标题输出位置 0=跟在主图指标标题后面,显示在同一个行
1=每个叠加指标单独一行指标标题
LineSpace:3 每一行指标标题行间距,只在Position=1有效
}
this.Option=
{
Type:'历史K线图', //创建图形类型
Windows: //窗口指标
[
{
Index:"MA", Overlay:true, OverlayIndexType:{ Position:1, LineSpace:3 },
},
{
Index:"MACD", Modify:true, Change:true, Close:true,Overlay:true, StringFormat:2, OverlayIndexType:{ Position:1, LineSpace:3 }
},
{
Index:"VOL", Modify:true,Change:false,Overlay:true, Close:true
},
],
OverlayIndex:
[
{Index:'BOLL', Windows:0 , IsShareY:true,ShowRightText:true },
{Index:'RSI', Windows:0, ShowRightText:true },
{Index:'MACD', Windows:0, ShowRightText:true },
{Windows:1, IndexName:"指标ID", Name:"自定义指标", Script:"T:MA(O,20),LINETHICK2;", Identify:"guid_66990",ShowRightText:false }
], //叠加指标
效果图
Frame
指标窗口坐标设置
更多Y轴设置说明详见 HQChart使用教程23-Y轴刻度显示设置
SplitCount
y轴刻度个数
IsShowLeftText
是否显示左侧Y轴刻度 左侧刻度如果间距不够会显示在框架内部, 必须设置这个值才能去掉左侧Y轴刻度显示
IsShowRightText
是否显示右侧Y轴刻度
Height
窗口高度比值
Custom
自定义刻度 详见HQChart使用教程50-Y轴自定义刻度设置说明
SplitType
Y轴刻度风格方式
0=自动分割(会自动调整最大最小), 1=根据当前屏最大最小值平均分割
EnableRemoveZero
所有Y轴显示刻度如果小数位后面是0, 就抹去0。 默认是开启的
如刻度 [10.00, 15.00, 20.00] 抹零以后显示为[10, 15, 20]
MinYDistance
Y轴刻度文字与刻度文字的最小间距, 小于这个间距隐藏后面的刻度文字
BorderLine
边框线显示控制 (1=上 2=下 4=左 8=右) 如果要下和右边框 BorderLine=2|8
IsShowYLine,IsShowXLine
IsShowYLine=是否显示Y轴刻度线 , IsShowXLine=是否显示X轴刻度线
TopSpace,BottomSpace
顶部留白和底部留白, K线图默认上下都留白的。
IsShowIndexTitle
是否显示指标标题信息, 默认是true
StepPixel
移动一个K线需要的手势移动的像素(默认4)
10176版本以后增加自动模式
0 自动模式, 手势移动的距离>=1根K线的宽度+间距才会移动一根K线
ZoomStepPixel
缩放一次,2个手指需要移动的间距像素(默认5)
SplashTitle
数据下载提示信息 默认是"数据加载中"
EnableZoomUpDown
是否允许K线缩放 默认全部开启
EnableZoomUpDown:
{
Wheel: 鼠标滚轴是否允许缩放 true/false
Keyboard:键盘上下是否允许缩放 true/false
Touch:手机手势是否允许缩放 true/false
}
EnableYDrag
Y轴上下拖拽缩放, 左右单独设置的
EnableYDrag:
{
Right:true, //右边Y轴是否可以拖拽
Left:true, //左边Y轴是否可以拖拽
},
OnCreatedCallback
在实例创建完成以后会回调这个函数, 这个回调会在请求数据前触发 . 如果要把hqchart内置的一些函数替换成自己的,可以在这个里面做. 10079版本以后才支持
function (chart) //chart是内部hqchart实例
this.Option.OnCreatedCallback=(chart) => { this.OnCreatedHQChart(chart); }
........................
this.Chart.SetOption(this.Option); //设置K线配置
Listener
监听鼠标键盘事件
KeyDown
是否监听键盘事件 true/false, 默认true
Wheel
是否监听鼠标滚轴事件 true/false , 默认true
EnableZoomIndexWindow
双击缩放附图指标窗口大小 true/false 默认false
版本10277 以后才支持
IsDrawPictureXY
是否显示选中的画图图形的X,Y轴信息
K线Ctrl+(left/right)快速移动步长
CtrlMoveStep
默认移动5个数据,
SelectedChart
指标图形选中, 默认是禁止的
EnableSelected 是否开启选中状态
EnableMoveOn 鼠标在图形上是否显示手的形状
SelectedChart:{ EnableSelected: true, EnableMoveOn:true }
EnableIndexChartDrag
是否启动拖拽指标图形, 默认关闭
ToolbarButtonStyle
指标栏按钮风格设置
0=使用div按钮 1=使用canvas绘图按钮,新功能的按钮都使用这个 (默认0)
EnableBorderDrag
是否允许拖动指标上下边框 (默认true)
ScriptError
指标脚本执行异常,错误回调函数 function(error);
CustomShow
自定义K线显示起始位置 .(1.1.13350版本以后的都支持)
{
Date: //起始日期 数值类型 yyyymmdd
Time: //起始时间 数值类型 (可以缺省, 如果缺省就只配置日期)
PageSize: //一屏显示的数据个数 (缺省使用当前屏数据个数)
}
EnableResize
图形画布自适应div大小, 支持div使用 width:80% height:60%设置高宽
KLineTooltip
Enable
true/false 默认true
是否显示K线的tooltip信息,
EnableKeyDown
true/false 默认 true
键盘左右移动十字光标出现tooltip.
PopMinuteChart
双击K线弹分时图
PopMinuteChart:
{
Enable:true, //是否启动 双击K线弹分时图
EnableMarkBG:true, //是否在K线上标注 当前分时图对应日期
Option: //可选 ,配置分时图窗口
{
Windows:
[
{ Index:"RSI", Overlay:false,MaxMin:false }
]
}
},
Listener
KeyDown
是否启用内置的键盘处理 true/false 默认true
Wheel
是否启用内置的鼠标滚轴处理 true/false 默认true
DragSelectRect
区间选择
Enable
是否创建区间选择图形
ShowMode
样式 默认0
0=只画边框
1=遮挡未选中区域
2=整体全选
EnableRButton
右键区间选择
EnableLButton
左键区间选择
css样式配置
position:relative
K线的div必须设置这个, 否在在K线上使用的dom显示位置会不对。
图片资源
内置的图片全部都svg, 如按钮,买卖图标等等, 需要导入iconfont文件
<link rel="stylesheet" href="../jscommon/umychart.resource/css/tools.css" />
<link rel="stylesheet" href="../jscommon/umychart.resource/font/iconfont.css" />
第3方数据对接
第3方数据前端接入教程(走势图)
- HQChart使用教程29-走势图如何对接第3方数据1
- HQChart使用教程29-走势图如何对接第3方数据2-最新分时数据
- HQChart使用教程29-走势图如何对接第3方数据3-多日分时数据
- HQChart使用教程29-走势图如何对接第3方数据4-叠加股票分时数据
- HQChart使用教程29-走势图如何对接第3方数据4-异动提示信息
- HQChart使用教程29-走势图如何对接第3方数据5-指标数据
- HQChart使用教程29-走势图如何对接第3方数据6-websocket分钟数据
- HQChart使用教程29-走势图如何对接第3方数据7-叠加股票最新分时数据
- HQChart使用教程29-走势图如何对接第3方数据8-量比数据
第3方数据前端接入教程(K线图)
- HQChart使用教程30-K线图如何对接第3方数据1
- HQChart使用教程30-K线图如何对接第3方数据2-日K数据
- HQChart使用教程30-K线图如何对接第3方数据3-1分钟K数据
- HQChart使用教程30-K线图如何对接第3方数据4-流通股本数据
- HQChart使用教程30-K线图如何对接第3方数据5-指标数据
- HQChart使用教程30-K线图如何对接第3方数据6-分笔K线数据
- HQChart使用教程30-K线图如何对接第3方数据7-日K数据分页下载
- HQChart使用教程30-K线图如何对接第3方数据8-1分钟K线数据分页下载
- HQChart使用教程30-K线图如何对接第3方数据9-BS指标数据
- HQChart使用教程30-K线图如何对接第3方数据10-如何绘制自定义线段或多边行指标数据
- HQChart使用教程30-K线图如何对接第3方数据11-如何绘制多组自定义图标
- HQChart使用教程30-K线图如何对接第3方数据12-如何在指标中绘制文字
- HQChart使用教程30-K线图如何对接第3方数据13-使用websocket更新最新K线数据
- HQChart使用教程30-K线图如何对接第3方数据14-轮询增量更新日K数据
- HQChart使用教程30-K线图如何对接第3方数据15-轮询增量更新1分钟K线数据
- HQChart使用教程30-K线图如何对接第3方数据16-日K叠加股票
- HQChart使用教程30-K线图如何对接第3方数据17-分钟K叠加股票
- HQChart使用教程30-K线图如何对接第3方数据18-如何绘制自定义柱子
- HQChart使用教程30-K线图如何对接第3方数据19-如何绘制彩色K线柱
- HQChart使用教程30-K线图如何对接第3方数据20-信息公告数据
- HQChart使用教程30-K线图如何对接第3方数据21-跨周期函数数据
- HQChart使用教程30-K线图如何对接第3方数据22-FINVALUE函数数据
- HQChart使用教程30-K线图如何对接第3方数据23-FINANCE函数数据
- HQChart使用教程30-K线图如何对接第3方数据24-如何填充K线背景色
- HQChart使用教程30-K线图如何对接第3方数据25-指标脚本自定义变量
- HQChart使用教程30-K线图如何对接第3方数据26-指标脚本自定义函数
- HQChart使用教程30-K线图如何对接第3方数据27-如何在指标中渲染DOM元素
- HQChart使用教程30-K线图如何对接第3方数据28-大盘数据
- HQChart使用教程30-K线图如何对接第3方数据29-板块字符串函数数据
- HQChart使用教程30-K线图如何对接第3方数据30-即时行情数据DYNAINFO
- HQChart使用教程30-K线图如何对接第3方数据31-获取指定品种的K线数据
- HQChart使用教程30-K线图如何对接第3方数据32-订单流
- HQChart使用教程30-K线图如何对接第3方数据33-日线叠加品种拖拽下载历史数据
- HQChart使用教程30-K线图如何对接第3方数据34-分钟K线叠加品种拖拽下载历史数据
- HQChart使用教程30-K线图如何对接第3方数据35-固定范围成交量分布图数据
- HQChart使用教程30-K线图如何对接第3方数据36–散点图
- HQChart使用教程30-K线图如何对接第3方数据37-如何绘制圆点
- HQChart使用教程30-K线图如何对接第3方数据38-通达信指标K线数据
- HQChart使用教程30-K线图如何对接第3方数据39-缩放下载K线数据历史数据
个人爱好(模型/摄影)