快速创建一个K线图页面

HQChart介绍
demo页面代码
Option的配置项说明
- Type
- Symbol
- IsAutoUpdate
- IsShowRightMenu
- IsShowCorssCursorInfo
- IsApiPeriod
- - 周期说明
- KLine
- - KLine.DragMode
  - KLine.Right
  - KLine.Period:
  - KLine.ZoomType
  - KLine.MaxRequestDataCount
  - KLine.PageSize
  - KLine.DataWidth
  - KLine.Info
  - KLine.InfoPosition
  - KLine.IsShowTooltip
  - KLine.DrawType
  - KLine.IsShowMaxMinPrice
  - KLine.RightSpaceCount
  - KLine.KLineDoubleClick
  - KLine.RightFormula
- KLineTitle
- - KLineTitle.IsShowName
  - KLineTitle.IsShowSettingInfo
  - KLineTitle.TextSpace
  - KLineTitle.DateTimeSpace
  - KLineTitle.PeriodSpace
  - KLineTitle.NameSpace
- Border
- AutoLeft, AutoRight
- Windows
- - Index
  - Modify
  - Change
  - Close
  - OverlayIndexType
- Frame
- - SplitCount
  - IsShowLeftText
  - IsShowRightText
  - Height
  - Custom
  - SplitType
  - EnableRemoveZero
  - MinYDistance
  - BorderLine
  - IsShowYLine,IsShowXLine
  - TopSpace,BottomSpace
  - IsShowIndexTitle
- StepPixel
- ZoomStepPixel
- SplashTitle
- EnableZoomUpDown
- EnableYDrag
- OnCreatedCallback
- Listener
- - KeyDown
  - Wheel
- EnableZoomIndexWindow
- IsDrawPictureXY
- K线Ctrl+(left/right)快速移动步长
- SelectedChart
- EnableIndexChartDrag
css样式配置
- position：relative
个人爱好(模型/摄影)

效果图

HQChart介绍

功能: 提供K线，走势图，支持通达信语法指标（麦语法), 画图工具，等等…
支持PC端页面，小程序，手机端页面。
地址：https://github.com/jones2000/HQChart

demo页面代码

git下载代码在webhqchart.demo\demo 目录下创建一个test.html文件，拷贝下面代码, K线图就完成。

<!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>//简单的把K线控件封装下function KLineChart(divKLine){this.DivKLine=divKLine;this.Chart=JSChart.Init(divKLine);   //把K线图绑定到一个Div上//K线配置信息this.Option= {Type:'历史K线图',   //创建图形类型Windows: //窗口指标[{Index:"MA", Modify:false,Change:false},{Index:"VOL", Modify:false,Change:false},{Index:"RSI", Modify:false,Change:false}, ], Symbol:'600000.sh',IsAutoUpdate:true,       //是自动更新数据//TradeIndex: {Index:'交易系统-BIAS'},    //交易系统IsShowRightMenu:true,          //右键菜单IsShowCorssCursorInfo:true,    //是否显示十字光标的刻度信息KLine:  //K线设置{DragMode:1,                 //拖拽模式 0 禁止拖拽 1 数据拖拽 2 区间选择Right:1,                    //复权 0 不复权 1 前复权 2 后复权Period:0,                   //周期 0 日线 1 周线 2 月线 3 年线 MaxRequestDataCount:1000,   //日线数据个数PageSize:50,               //一屏显示多少数据//Info:["互动易","大宗交易",'龙虎榜',"调研","业绩预告","公告"],       //信息地雷IsShowTooltip:true,                 //是否显示K线提示信息},KLineTitle: //标题设置{IsShowName:true,       //不显示股票名称IsShowSettingInfo:true //不显示周期/复权},Border: //边框{Left:1,         //左边间距Right:50,       //右边间距Bottom:25,      //底部间距Top:25          //顶部间距},Frame:  //子框架设置[{SplitCount:3,StringFormat:0, IsShowLeftText:false},{SplitCount:2,StringFormat:0, IsShowLeftText:false},{SplitCount:2,StringFormat:0, IsShowLeftText:false}]};this.Create=function()  //创建图形{var self=this;$(window).resize(function() { self.OnSize(); });    //绑定窗口大小变化事件this.OnSize();  //让K线全屏this.Chart.SetOption(this.Option);  //设置K线配置}this.OnSize=function()  //自适应大小调整{var height= $(window).height();var width = $(window).width();this.DivKLine.style.top='px';this.DivKLine.style.left='px';this.DivKLine.style.width=width+'px';this.DivKLine.style.height=height+'px';this.Chart.OnSize();}}$(function () {WebFont.load({ custom: { families: ['iconfont'] } });   //预加载下iconfont资源var klineControl=new KLineChart(document.getElementById('kline'));klineControl.Create();})</script>
</body>
</html>

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 自定义秒

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

是否显示K线的tooltip信息, 信息地雷tooltip信息, 鼠标移动到K线上或键盘左右移动十字光标都会出现tooltip.

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

KLine.IsShowMaxMinPrice

K线上是否显示最大最小值（版本>=7717)

KLine.RightSpaceCount

最后数据和右边框空白间距,空白的宽度=RightSpaceCount*k线宽度
（ver>=7756)

KLine.KLineDoubleClick

是否启动双击K线弹出内置分时对话框. 默认是开启

KLine.RightFormula

内置复权算法类型， 0=简单复权， 1=使用复权系数（复权因子）计算复权。缺省为0
** 只有在IsApiPeriod=false的时候才会使用前端计算复权，否在都是后台计算复权**

KLineTitle

KLineTitle.IsShowName

K线标题是否显示股票名称

KLineTitle.IsShowSettingInfo

K线标题是否周期/复权

KLineTitle.TextSpace

标题文字间距默认一个空格的间距(只支持小程序,app）

KLineTitle.DateTimeSpace

日期时间输出向后间距（小程序才有）

KLineTitle.PeriodSpace

周期输出向后间距（小程序才有）

KLineTitle.NameSpace

名称输出向后间距（小程序才有）

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

指标窗口坐标设置

SplitCount

y轴刻度个数

IsShowLeftText

是否显示左侧Y轴刻度左侧刻度如果间距不够会显示在框架内部，必须设置这个值才能去掉左侧Y轴刻度显示

IsShowRightText

是否显示右侧Y轴刻度

Height

窗口高度比值

Custom

自定义刻度详见HQChart使用教程50-Y轴自定义刻度设置说明

SplitType

Y轴刻度风格方式
０＝自动分割（会自动调整最大最小），　１＝根据当前屏最大最小值平均分割

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/falseKeyboard:键盘上下是否允许缩放 true/falseTouch:手机手势是否允许缩放 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

是否启动拖拽指标图形，默认关闭

css样式配置

position：relative

K线的div必须设置这个，否在在K线上使用的dom显示位置会不对。

个人爱好(模型/摄影)

HQChart使用教程1- 如何快速创建一个K线图页面相关推荐

HQChart使用教程2- 如何把自定义指标显示在K线图页面
如何把自定义指标显示在K线图页面自定义一个指标通过Option设置指标自定义一个带参数的指标让我们用上证指数来回测这个奇葩的BS指标吧 HQChart代码地址效果图自定义一个指标假设我们 ...
HQChart使用教程74-使用快速创建数字币深度图
HQChart使用教程74-使用快速创建数字币深度图深度图效果图 demo例子 demo地址代码 Option项说明 Type Symbol IsAutoUpdate AutoUpdateFre ...
如何使用Echarts创建动态K线图
如何使用Echarts创建动态K线图一:了解组件首先来看官方的例子和使用文档 Echarts官方实例-----点击此处我们可以看到有多重的图形和格式可以供我们选择,我们在此选择K线图. 我们选择 ...
任务描述本关任务：利用所学知识，按要求自行绘制一个 K 线图。
第一关 import pyecharts.options as opts from pyecharts.charts import Candlestickx_data = ["2017-10 ...
HQChart小程序教程3-新版2D单画布如何切换K线图和分时图
HQChart小程序教程3-新版2D单画布如何切换K线图和分时图 K线图和分时图图形切换流程图代码讲解 K线周期切换创建K线图步骤配色修改禁止hqchart缓存绘制 HQChart代码地址 ...
HQChart使用教程9- 如何快速创建K线训练页面
HQChart使用教程9- 如何快速创建K线训练页面 K线训练已重构新版本使用详见 demo页面部分代码 Option的配置项说明注册K线训练K线移动的监听 K线训练操作接口 HQChart代码地址 ...
如何(c++,js)写一个传统的K线图和走势图5 - 移动筹码图
下图就是一般传统行情软件的移动筹码图. 左边是一个K线图,右边是一个移动筹码图, 鼠标在K线上移动的时候,右边的筹码图就显示当前K线数据下的筹码分布信息.随着鼠标在K线上移动, 右边的筹码图是动态变化 ...
HQChart使用教程7- 如何快速创建一个分时图页面
如何快速创建一个分时图页面 demo页面代码品种代码后缀 Option的配置项说明 Type Symbol IsAutoUpdate DayCount Border Minute DragMode ...
HQChart使用教程37 - 如何在uni-app创建k线图(app)
HQChart使用教程37 - 如何在uni-app创建k线图 app 插件目录创建步骤 1. 拷贝插件到工程中 2. 创建一个page页在page页中 3.运行到模拟器通过uniapp下载hq ...

HQChart使用教程1- 如何快速创建一个K线图页面