HQChartチュートリアル1-K線図ページをすばやく作成する方法
効果図
HQChart紹介
机能:K线、动向図、通达信文法指标(麦文法)、画図ツールなどを提供する.PC側ページ、ウィジェット、携帯電話側ページをサポートします.アドレス:https://github.com/jones2000/...
demoページコード
gitダウンロードコードはwebhqchart.demodemoディレクトリの下にtestを作成します.htmlファイルは、下のコードをコピーすると、K線図が完成します.

  
  
  

  
    
    
    
  

    


    
    
                 
        
      
    
    

        //    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    
                    MaxReqeustDataCount: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();
        })

      
  

Option的配置项说明

上面的代码可以看到，所有K线图的设置都是通过==Option==来配置的。
Type： 图形类型， 这里填==历史K线图==代表创建一个K线图
Symbol： 显示的股票代码 股票代码需要带后缀. 上海.sh 深证.sz
IsAutoUpdate: 是否自动更新最新行情，如果是true, 会定时(30s/次)获取行情数据,更新K线图及指标
IsShowRightMenu: 是否显示右键菜单， 如果是手机页面可以设置成false

IsShowCorssCursorInfo: 鼠标移动或手势的时候是否显示十字光标

KLine.DragMode: 拖拽模式 0=禁止拖拽(禁止鼠标或手势左右拖动数据) 1=数据拖拽(可以用鼠标或手势左右拖动数据) 2=区间选择(拖动可以选择一段时间数据做==区间统计==，和==形态匹配==


KLine.Right: 复权 0=不复权 1=前复权 2=后复权
KLine.Period: 周期 0=日线 1=周线 2=月线 3=年线 4=1分钟 5=5分钟 6=15分钟 7=30分钟 8=60分钟
KLine.MaxReqeustDataCount: 请求K线数据的最大个数
KLine.PageSize: 初始一屏显示几个K线，通过鼠标滚轴上下，键盘上下，手势两个手指上下可以调整一屏显示K线的个数
KLine.Info: 信息地雷 目前支持“互动易","大宗交易",'龙虎榜',"调研","业绩预告","公告"， 可以选择其中的几个填上

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

KLineTitle.IsShowName: K线标题是否显示股票名称
KLineTitle.IsShowSettingInfo: K线标题是否周期/复权

Border.Left, Border.Right,Border.Bottom,Border.Top 坐标边框到画布边框的间距

Windows 指标窗口，数组可以配置多个指标窗口， 每个窗口单独设置

   1. **Index**       
   2. **Modify**             
   3. **Change**         

Frame指標ウィンドウ座標設定

SplitCount y軸目盛り個数

IsShowLeftText左側Y軸目盛り左側目盛りを表示するかどうかピッチが足りないとフレーム内部に表示されるので、左側Y軸目盛り表示

を外すにはこの値を設定する必要があります.
基本的なK線の設定はここまで紹介して、また問題があれば交流QQ群を加えることができます:95092318