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

置顶 HQChart

已于 2024-07-18 10:05:42 修改

阅读量3.2w

点赞数 19

分类专栏： JavaScript HQChart 文章标签： K线图图形 H5 指标 kline

于 2019-05-16 21:35:58 首次发布

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

版权

HQChart 同时被 2 个专栏收录

164 篇文章 98 订阅

订阅专栏

JavaScript

151 篇文章 33 订阅

订阅专栏

快速创建一个K线图页面

HQChart介绍
插件源码地址
demo页面代码
Option的配置项说明
css样式配置
- position：relative
- 图片资源
第3方数据对接
- 第3方数据前端接入教程(走势图)
- 第3方数据前端接入教程(K线图)
个人爱好(模型/摄影)

效果图

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,
                    KLineDoubleClick:false, //禁止双击弹框
                    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

是否显示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
13=high low
14=外部定制K线图
15=HLC Area

KLine.IsShowMaxMinPrice

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

KLine.RightSpaceCount

最后数据和右边框空白间距,空白的宽度=RightSpaceCount*k线宽度
（ver>=7756)
在这里插入图片描述

KLine.KLineDoubleClick

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

KLine.RightFormula

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

KLine.PriceGap

显示未回补缺口

PriceGap: 
{ 
	Enable:true, //true=显示缺口 false=隐藏缺口
	Count:3 //显示缺口个数
},

在这里插入图片描述

KLineTitle

KLineTitle.IsShowName

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

KLineTitle.IsShowSettingInfo

K线标题是否周期/复权
在这里插入图片描述

KLineTitle.TextSpace

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

KLineTitle.DateTimeSpace

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

KLineTitle.PeriodSpace

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

KLineTitle.NameSpace

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

KLineTitle.IsTitleShowLatestData

十字光标不在图形上，标题栏显示最后一个数据，默认(false)

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轴刻度风格方式
０＝自动分割（会自动调整最大最小），　１＝根据当前屏最大最小值平均分割

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%设置高宽

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方数据前端接入教程(走势图)

第3方数据前端接入教程(K线图)

个人爱好(模型/摄影)

在这里插入图片描述

HQChart

关注

19
点赞
踩
49

收藏

觉得还不错? 一键收藏
打赏
9
评论
HQChart使用教程1- 如何快速创建一个K线图页面

快速创建一个K线图页面HQChart介绍demo页面代码Option的配置项说明效果图HQChart介绍功能: 提供K线，走势图，支持通达信语法指标（麦语法), 画图工具，等等…支持PC端页面，小程序，手机端页面。地址：https://github.com/jones2000/HQChartdemo页面代码git下载代码在webhqchart.demo\demo 目录下创建一......
复制链接

扫一扫