精华内容
下载资源
问答
  • HQChart是第1个基于国内传统PC股票客户端软件(C++)移植到js/py平台的一个项目, 包含K线图图形库及麦语法(分析家语法)指标执行器. js版本的K线图形库支持原生js,VUE, uniapp,小程序. 麦语法(分析家语法)指标执行器...
  • HQChart是第1个基于国内传统PC股票客户端软件(C++)移植到js/py平台的一个项目, 包含K线图图形库及麦语法(分析家语法)指标执行器. 支持平台:js, vue2.0, vue3.0, uniapp,小程序 支持品种:支持股票,期货, 数字货币...
  • HQChart使用教程73-使用Vue3.0创建HQChart图形序预备知识获取dom元素mountedmethods成员变量结束语demo源码App.vue交流QQ群: 950092318HQChart代码地址个人爱好(模型/摄影) 序 听说Vue3.0发布了, 群里的很多小伙伴...

    听说Vue3.0发布了, 群里的很多小伙伴们都开始询问HQChart是否可以在Vue3.0里面使用。HQChart是用js裸写开发的, 应该是可以的。 只要根据vue3.0的规则把一个div绑定到hqchart实例上就可以了。我想着这个很简单,就把任务给了页面开发小组, 让他们做一个demo. 最后任务失败了, 没有搞定。只能抽空自己做了,哎~~~。 花了3小时,看了vue3.0的文档,直接就吐血,对一个常年使用c++开发的人, 面对对象开发是必不可少的。 vue.3.0里面直接就去掉了this,哎 …

    预备知识

    获取dom元素

    最原始的方法通过document.getElementById()来获取, 在vue2.0通过$refs来获取, vue3.0这个没了, 需要用ref()来生成一个dom对应的变量, 然后把这个变量暴露出去。vue就会自动给你绑定了。 很绕口吧, 我也是看了半天才明白的。下面就是以app这个div绑定到变量DivApp上的例子

    <template>
        <div id="app" ref='DivApp' style="height:100%; width:100%">
           ......
        </div>
    </template>
    
    export default {
    
        name: 'HQChartDemo',
    
        setup(/*props, context*/)
        {
            .......
            var DivApp=ref(null); //创建一个变量
            .......
            
           return { 
                 .....
                //DOM元素
                DivApp,  //把变量暴露出去 ref='DivApp' 就可以自动绑定了
               .......
            };
        }
     } 
    

    mounted

    vue2.0里面的mounted, 在vue3.0就没有了, 需要使用onMounted() 代替, 在setup()里面定制这个函数.

    setup(/*props, context*/)
    {
    	..........
        onMounted(()=>
        {
            console.log(`[HQChartDemo::mounted]`);
            window.onresize = ()=>{ OnSize() }
    
            OnSize();              
            CreateKLineChart(0);  
        });
        ........
    }
    

    methods

    vue2.0里面的methods也没有了,在vue3.0直接把函数定义在setup()里面就可以, 如果要给外部就,就返回,内部就不用返回了

    setup(/*props, context*/)
     {
    		const ChangeSymbol=function(symbol)   //切换股票
            {
                HQChartData.Symbol=symbol;
                HQChartData.Chart.ChangeSymbol(HQChartData.Symbol);
            };
            
            //内部函数不暴露出去
            const IsKLineChart=function()
            {
                if (!HQChartData.Chart || !HQChartData.Chart.JSChartContainer) return;
                return HQChartData.Chart.JSChartContainer.ClassName=="KLineChartContainer";
            };
            
           return { 
                ......
                //导出函数
                ........
                ChangeSymbol,   //切换代码,作为接口暴露出去给外部用
            };
    
    }
    

    成员变量

    在vue2.0里面都是放在data()里面的, vue3.0放在setup() 里面, 如果只是内部用可以不返回。
    hqchart需要在图形创建以后保存一个实例, 后续k线图的操作都是在这个实例上的操作。所以需要一个内部变量(Chart)来保存

    setup(/*props, context*/)
    {
         const HQChartData=
         { 
             Symbol:'600000.sh',  //代码
             Chart:null,          //图形控件
         };
         ......
    }
    

    由于没有this这个东西了, 所有函数直接用HQChartData.Chart 就可以访问了。

    结束语

    有了这些知识以后,就可以使用vue3.0来创建hqchart了。
    vue3.0我不懂, 有说的不对的地方,请指正。另外还有小伙伴问ts创建hqchart, 这个ts我真不懂, 也没用过, 等以后我空了, 再帮你们看吧, 如果有谁用ts创建过hqchart也欢迎分享出来。

    demo源码

    App.vue

    <template>
        <div id="app" ref='DivApp' style="height:100%; width:100%">
           <div ref='DivButtons'>
                <div>
                    <button  @click="ChangePeriod(0)">日线</button>
                    <button  @click="ChangePeriod(4)">1分钟</button>
                    <button  @click="ChangePeriod(6)">15分钟</button>
                    <button  @click="ChangeMinute()">分时</button>
                    <button  @click="ChangeSymbol('000001.sz')">平安银行</button>
                    <button  @click="ChangeSymbol('600999.sh')">招商银行</button>
                </div>
            </div>
    
            <div>
                <div id="kline" ref='DivKLine' class='hqchart' style="height:400px; width:500px"></div>  
            </div>
        </div>
    </template>
    
    <script>
    import { onMounted, onUnmounted, ref } from 'vue'
    import HQChart from 'hqchart'
    import 'hqchart/src/jscommon/umychart.resource/css/tools.css'
    import 'hqchart/src/jscommon/umychart.resource/font/iconfont.css'
    
    function DefaultData() { }
    
    DefaultData.GetKLineOption=function()
    {
        //K线配置信息
        var option= 
        {
            Type:'历史K线图',   //创建图形类型
            
            Windows: //窗口指标
            [
                {Index:"MA", Modify:true,Change:true },
                {Index:"VOL", Modify:true,Change:true, Close:true }, 
            ], 
    
            IsAutoUpdate:true,              //是自动更新数据
            AutoUpdateFrequency:1000,       //数据更新频率
            IsShowRightMenu:false,          //右键菜单
    
            IsApiPeriod:true,             //复权,周期都使用后台数据
    
            //CorssCursorTouchEnd:true,
            //StepPixel:5,        //移动一个K线需要的手势移动的像素(默认4)
            //ZoomStepPixel:8,    //缩放一次,2个手指需要移动的间距像素(默认5)
    
            KLine:  //K线设置
            {
                DragMode:1,                 //拖拽模式 0 禁止拖拽 1 数据拖拽 2 区间选择
                Right:0,                    //复权 0 不复权 1 前复权 2 后复权
                Period:0,                   //周期 0 日线 1 周线 2 月线 3 年线 
                MaxReqeustDataCount:1000,    //数据个数
                MaxRequestMinuteDayCount:10, //分钟数据取5天
                PageSize:30,                 //一屏显示多少数据
                IsShowTooltip:true,          //是否显示 div K线提示信息 (手机端要填false)
                DrawType:0,                   //K线类型 0=实心K线柱子 1=收盘价线 2=美国线 3=空心K线柱子 4=收盘价面积图
                RightSpaceCount:1
            },
    
            KLineTitle: //标题设置
            {
                IsShowName:true,       //不显示股票名称
                IsShowSettingInfo:true //不显示周期/复权
            },
    
            Border: //边框
            {
                Left:1,         //左边间距
                Right:80,       //右边间距
                Bottom:25,      //底部间距
                Top:25          //顶部间距
            },
            
            Frame:  //子框架设置
            [
                {   
                    SplitCount:3,IsShowLeftText:false, Height:8,
                    Custom: [ { Type:0, Position:'right' } ]
                },
    
                { SplitCount:2,IsShowLeftText:false, Height:2 },
            ],
    
            ExtendChart:    //扩展图形
            [
                //{Name:'KLineTooltip' }  //手机端tooltip
            ],
        };
    
        return option;
    }
    
    DefaultData.GetMinuteOption=function()
    {
        //分时图配置信息
        var option= 
        {
            Type:'分钟走势图',   //创建图形类型
            //Type:'分钟走势图横屏',
    
            Windows: //窗口指标
            [
                //{Index:"MACD", Modify:true, Change:false, Close:false }
                //{Index:"涨跌趋势", Modify:false,Change:false},
            ], 
            
            Symbol:'000001.sz',         
            IsAutoUpdate:true,              //是自动更新数据
            AutoUpdateFrequency:1000,       //数据更新频率
            DayCount:1,                 //1 最新交易日数据 >1 多日走势图
            IsShowRightMenu:true,       //是否显示右键菜单
    
            //CorssCursorInfo:{  Left:2, Right:2, Bottom:1,RightTextFormat:1 },
    
            MinuteLine:
            {
                IsDrawAreaPrice:true,      //是否画价格面积图
                IsShowAveragePrice:true,   //不显示均线
            },
    
            MinuteTitle:
            {
                IsShowTime:true,
                IsShowName:true,
                IsShowDate:false,
            },
    
            //EnableBorderDrag:false,
    
            Border: //边框
            {
                Left:1,    //左边间距
                Right:1,     //右边间距
                Top:25,
                Bottom:25
            },
            
            Frame:  //子框架设置
            [
                { 
                    SplitCount:5,
                    Custom:
                    [
                        { 
                            Type:1, 
                            Position:'left', LineType:0,
                            Data:
                            [
                                {
                                    Value:15.8,
                                    Color:'rgb(0,34,255)', TextColor:'rgb(255,255,255)',
                                },
                            ] 
                        }
                    ]
                },
                { SplitCount:3 },
            ],
    
            ExtendChart:    //扩展图形
            [
                //{Name:'MinuteTooltip' }  //手机端tooltip
            ]
        };
    
        return option;
    }
    
    
    export default {
    
        name: 'HQChartDemo',
    
        setup(/*props, context*/)
        {
            const HQChartData=
            { 
                Symbol:'600000.sh',  //代码
                Chart:null,          //图形控件
            };
    
            var DivApp=ref(null);
            var DivKLine=ref(null);
            var DivButtons=ref(null);
    
            onMounted(()=>
            {
                console.log(`[HQChartDemo::mounted]`);
                window.onresize = ()=>{ OnSize() }
    
                OnSize();              //子组件的mounted在父组件的mounted之前执行了  
                CreateKLineChart(0);  
            });
    
            onUnmounted(()=>
            {
    
            });
    
            ///
            //内部接口
            const OnSize=function()
            { 
                var app=DivApp.value;
                console.log(app.value);
                var height= app.offsetHeight;
                var width = app.offsetWidth;
                console.log(`[HQChartDemo::OnSize] width=${width} height=${height}`); 
    
                var groupbutton=DivButtons.value;
                var buttonsHeight=groupbutton.offsetHeight;
    
                //获取屏幕大小 动态设置K线的div大小
                var kline=DivKLine.value;
                kline.style.width=width+'px';
                kline.style.height=(height-buttonsHeight)+'px';
    
                if (HQChartData.Chart) HQChartData.Chart.OnSize();
            };
    
            const ClearChart=function()
            {
                if (HQChartData.Chart)
                {
                    HQChartData.Chart.StopAutoUpdate();
                    HQChartData.Chart=null;
                }
    
                var divKLine=document.getElementById('kline');
    			while (divKLine.hasChildNodes()) 
    			{
                    divKLine.removeChild(divKLine.lastChild);
    			}
            };
    
            //创建走势图
            const CreateKLineChart=function(period)
            {
                ClearChart();
    
                var option=DefaultData.GetKLineOption();
                option.Symbol=HQChartData.Symbol;
                option.Period=period;
                
                var divKLine=document.getElementById('kline');
                var chart=HQChart.Chart.JSChart.Init(divKLine);
                //option.NetworkFilter=this.NetworkFilter;
                chart.SetOption(option);
                HQChartData.Chart=chart;
            };
    
            const ChangePeriod=function(period)    //K线图切换周期
            {
                if (IsKLineChart())
                    HQChartData.Chart.ChangePeriod(period);
                else
                    CreateKLineChart(period);  
            };
    
            const ChangeMinute=function()  //分时图
            {
                if(IsMinuteChart()) 
                    return;
                else 
                {
                    CreateMinuteChart();
                }
            };
    
            const ChangeSymbol=function(symbol)   //切换股票
            {
                HQChartData.Symbol=symbol;
                HQChartData.Chart.ChangeSymbol(HQChartData.Symbol);
            };
    
            const IsKLineChart=function()
            {
                if (!HQChartData.Chart || !HQChartData.Chart.JSChartContainer) return;
                return HQChartData.Chart.JSChartContainer.ClassName=="KLineChartContainer";
            };
    
            const IsMinuteChart=function()
            {
                if (!HQChartData.Chart || !HQChartData.Chart.JSChartContainer) return;
                return HQChartData.Chart.JSChartContainer.ClassName=="MinuteChartContainer";
            };
    
            //创建分时图
            const CreateMinuteChart=function()
            {
                ClearChart();
    
                var option=DefaultData.GetMinuteOption();
                option.Symbol=HQChartData.Symbol;
    
                var divKLine=document.getElementById('kline');
                var chart=HQChart.Chart.JSChart.Init(divKLine);
                //option.NetworkFilter=this.NetworkFilter;
                chart.SetOption(option);
                HQChartData.Chart=chart;
            };
    
            return { 
                //hqchart数据
                //HQChartData,
    
                //DOM元素
                DivApp,
                DivKLine,
                DivButtons,
    
                //导出函数
                ChangePeriod,   //切换K线周期
                ChangeMinute,   //切换走势图
                ChangeSymbol,   //切换代码
            };
        }
      
    }
    </script>
    
    <style >
    .hqchart
    {
        position: relative;
    }
    
    </style>
    
    

    交流QQ群: 950092318

    如果还有问题可以加交流QQ群: 950092318

    HQChart代码地址

    地址:github.com/jones2000/HQChart

    个人爱好(模型/摄影)

    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述

    展开全文
  • HQChart实战教程8-如何重新初始化hqchart需求:步骤:h5小程序/uniapp-app(注意不是h5)h5完整实例代码 需求: 有的时候页面可能需要重新初始化hqchart实例。 一般的情况是不需要重新初始化实例,当时候setoption初始...

    需求:

    有的时候页面可能需要重新初始化hqchart实例。 一般的情况是不需要重新初始化实例,当时候setoption初始化以后, 后续的K先操作都可以直接调用对应的实例函数来完成,具体可以看教程(HQChart使用教程5- K线图控件操作函数说明)。 但有时候确实需要重新初始化, hqchart不提供重新初始化的方法, 只能自己手动重新初始化。

    步骤:

    h5

    1. 停止实例的定时器
    2. 清空实例
    3. 清空绑定k线div的下面的所有子元素
    4. 重新JSChart.Init() 初始化
    5. SetOption() 加载配置
      这样就完成了 重新初始化的步骤了。
    this.Recreate=function()
    {
         if (this.Chart) 
         {
             this.Chart.StopAutoUpdate();    //停止定时器
             this.Chart=null;  //清空实例
         }
    
         this.ClearDivDOM(); //清空this.DivKLine 下面的所有子元素
         this.Chart=JSChart.Init(this.DivKLine);   //把K线图绑定到一个Div上
         this.Create();
    }
    
    this.ClearDivDOM=function()     
    {
        while (this.DivKLine.hasChildNodes()) 
        {
            this.DivKLine.removeChild(this.DivKLine.lastChild);
        } 
    }
    

    小程序/uniapp-app(注意不是h5)

    1. 停止定时器
    2. 清空实例
    3. 重新JSChart.Init() 初始化
    4. SetOption() 加载配置

    h5完整实例代码

    <!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" style="width: 900px;height:400px;position: relative;"></div>
    
        <div>
            <span id='recreate'>重新新建</span>
        </div>
    
        <script src="content/js/jquery.min.js"></script>
        <script src="content/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>
    
            //JSConsole.Chart.Log=() =>{}
            //JSConsole.Complier.Log=()=>{}
    
            /*
            MARKET_SUFFIX_NAME.GetMarketStatus = function (symbol) 
            {
                return 2;
            }
            */
            
            //简单的把K线控件封装下
            function KLineChart(divKLine)
            {
                this.DivKLine=divKLine;
                this.Chart=JSChart.Init(divKLine);   //把K线图绑定到一个Div上
    
                this.ClearDivDOM=function()     
                {
                    while (this.DivKLine.hasChildNodes()) 
                    {
                        this.DivKLine.removeChild(this.DivKLine.lastChild);
                    } 
                }
    
                //K线配置信息
                this.Option= {
                    Type:'历史K线图',   //创建图形类型
                    
                    Windows: //窗口指标
                    [
                        //{Index:"EMPTY"},
                        {Index:"MA", Modify:true,Change:false},
                        {Index:"VOL", Modify:true,Change:false},
                        {Index:"ADL", Modify:true,Change:false},
                        //{Index:"MACD", Modify:true,Change:false},
                        //{Index:"RSI", Modify:false,Change:false}, 
                    ], 
    
                    
                    OverlayIndex:
                    [
                        //{Index:'VOL', Windows:0 ,Args:[ { Name:'M1', Value:20}, { Name:'M2', Value:30} ] , ShowRightText:false},
                        //{Index:'MACD', Windows:0 },
                        //{Index:'MA', Windows:1 }
                    ],  //叠加指标
    
                    OverlayIndexFrameWidth:1,
                    
                    
                    Symbol:'000001.sh',
                    IsAutoUpdate:true,       //是自动更新数据
                    AutoUpdateFrequency:3000,   //数据更新频率
                    //TradeIndex: {Index:'交易系统-BIAS'},    //交易系统
        
                    IsShowRightMenu:true,          //右键菜单
                    IsShowCorssCursorInfo:true,    //是否显示十字光标的刻度信息
                    //CorssCursorTouchEnd:true,
        
                    KLine:  //K线设置
                    {
                        DragMode:1,                 //拖拽模式 0 禁止拖拽 1 数据拖拽 2 区间选择
                        Right:1,                    //复权 0 不复权 1 前复权 2 后复权
                        Period:0,                   //周期 0 日线 1 周线 2 月线 3 年线 
                        MaxReqeustDataCount:1000,   //数据个数
                        MaxRequestMinuteDayCount:10, //分钟数据取5天
                        PageSize:50,               //一屏显示多少数据
                        //Info:["互动易","大宗交易",'龙虎榜',"调研","业绩预告","公告"],       //信息地雷
                        IsShowTooltip:true,                 //是否显示K线提示信息
                        DrawType:0,      //K线类型 0=实心K线柱子 1=收盘价线 2=美国线 3=空心K线柱子 4=收盘价面积图
                        FirstShowDate:20161201,
                        KLineDoubleClick:false, //禁止双击弹框
                    },
        
                    KLineTitle: //标题设置
                    {
                        IsShowName:true,       //不显示股票名称
                        IsShowSettingInfo:true //不显示周期/复权
                    },
        
                    Border: //边框
                    {
                        Left:5,         //左边间距
                        Right:100,       //右边间距
                        Bottom:25,      //底部间距
                        Top:25          //顶部间距
                    },
                    
                    Frame:  //子框架设置
                    [
                        {SplitCount:3,StringFormat:0, IsShowLeftText:false},
                        {SplitCount:2,StringFormat:0, IsShowLeftText:false,  },
                        {SplitCount:2,StringFormat:0, IsShowLeftText:false}
                    ],
    
                    ExtendChart:    //扩展图形
                    [
                        //{Name:'KLineTooltip' }  //手机端tooltip
                    ],
    
                    Overlay:
                    [
                       // {Symbol:'399300.sz', DrawType:1, Color:'rgb(0,0,255)'}
                    ],
                };
                    
                this.Recreate=function()
                {
                    if (this.Chart) 
                    {
                        this.Chart.ChartDestory();    //停止定时器
                        this.Chart=null;
                    }
    
                    this.ClearDivDOM(); //清空this.DivKLine 下面的所有子元素
                    this.Chart=JSChart.Init(this.DivKLine);   //把K线图绑定到一个Div上
                    this.Create();
                }
    
    
                this.Create=function()  //创建图形
                {
                    var self=this;
                    $(window).resize(function() { self.OnSize(); });    //绑定窗口大小变化事件
    
                    var blackStyle=HQChartStyle.GetStyleConfig(STYLE_TYPE_ID.BLACK_ID); //读取黑色风格配置
                    JSChart.SetStyle(blackStyle);
                    this.DivKLine.style.backgroundColor=blackStyle.BGColor; //设置最外面的div背景
    
                    this.OnSize();  //让K线全屏
                    this.Chart.SetOption(this.Option);  //设置K线配置
                }
    
                this.OnSize=function()  //自适应大小调整
                {
                    var height= $(window).height()-40;
                    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();
    
                $("#recreate").click(function() { klineControl.Recreate(); } );
            })
    
            
    
        </script>  
    </body>  
    </html>
    
    
    
    <style>
    
    /*
    .klineframe-toolbar
    {
        color:rgb(238,233,233);
    }
    
    .klineframe-toolbar span:hover
    {
        color: #0182d4;
    }
    */
        
    </style>
    

    如果还有问题可以加交流QQ群: 950092318

    HQChart代码地址
    地址:https://github.com/jones2000/HQChart

    展开全文
  • HQChart使用教程79-uniapp中hqchart内置组件使用教程hqchart组件步骤1. 下载插件导入组件组件接口函数介绍SetSize(width, height)ClearChart()OnSize()CreateHQChart()ChangeKLinePeriod(period)ChangeMinutePeriod...

    hqchart组件

    为了方便hqchart在uniapp的使用, hqchart内置一个简单的hqchart组件,只需要导入组件就可以使用.

    步骤

    1. 下载插件

    插件地址https://ext.dcloud.net.cn/plugin?id=4591,通过xhbuilderx直接导入就可以. 导入完成以后可以在uni_modules下面找到jones-hqchart2插件,见下图

    在这里插入图片描述

    导入组件

    1. HQChartControl.vue 这个就是hqchart组件的文件,直接导入就可以
    import HQChartControl from '@/uni_modules/jones-hqchart2/js_sdk/HQChartControl.vue'
    
    export default 
    {
    	components: { HQChartControl },
    	...........
    }
    
    1. 在视图层添加一个hqchart组件
    <template>
    	
    	<div>
    		<div style='background-color:#101010;'>
    			<HQChartControl ref="HQChartCtrl" DefaultChart="{Type:'KLine'}" DefaultSymbol="000001.sz"> </HQChartControl>
    		</div>
    	...........
    	</div>
    			
    </template>
    
    1. 创建图形
      在页面初始化的时候获取手机页面大小,然后根据手机页面大小创建对应的K线图
    onShow()
    {
    	uni.getSystemInfo({
    	    success:  (res) =>
    		{
    			var width=res.windowWidth;
    			var height=res.windowHeight;
    	        this.ChartWidth=width;
    			this.ChartHeight=height-130;
    			this.$nextTick(()=>
    			{
    				this.CreateHQChart(); 
    			})
    	    }
    	});
    },
    
    CreateHQChart()
    {
    	var chartHeight=this.ChartHeight;
    	let hqchartCtrl=this.$refs.HQChartCtrl;
    	//修改option
    	//hqchartCtrl.KLine.Option.
    	hqchartCtrl.NetworkFilter=this.NetworkFilter;
    	hqchartCtrl.SetSize(this.ChartWidth,chartHeight);	//设置图形大小
    	hqchartCtrl.OnSize();
    	hqchartCtrl.CreateHQChart();
    },
    
    

    组件接口函数介绍

    SetSize(width, height)

    设置K线图大小

    ClearChart()

    清空hqchart示例, 在页面退出或隐藏的时候用,这样可以停止自动更新的定时器

    OnSize()

    调整K线图大小 , 目前只支持h5.

    CreateHQChart()

    创建K线图/分时图 根据 成员变量ChartType决定的, “Minute”=分时图 “KLine”=k线图

    ChangeKLinePeriod(period)

    切换K线周期, 如果当前是分时图,会自动销毁分时图创建K线图

    ChangeMinutePeriod(dayCount)

    切换分时图, 如果当前是K线图, 会自动销毁K线图创建分时图

    ChangeKLineIndex(windowId,name)

    切换指标 windowId=窗口索引 name=指标名字
    只在K线图下有效

    ChangeSymbol(symbol)

    切换股票

    NetworkFilter(data, callback)

    第3放数据对接, 直接在外部替换这个函数,换成你的NetworkFilter就可以。

    CreateHQChart()
    {
    	var chartHeight=this.ChartHeight;
    	let hqchartCtrl=this.$refs.HQChartCtrl;
    	//修改option
    	//hqchartCtrl.KLine.Option.
    	hqchartCtrl.NetworkFilter=this.NetworkFilter; //替换成外部数据对接
    	hqchartCtrl.SetSize(this.ChartWidth,chartHeight);
    	hqchartCtrl.OnSize();
    	hqchartCtrl.CreateHQChart();
    },
    
    NetworkFilter(data, callback) //对接数据
    {
    	console.log(`[App:NetworkFilter] Name=${data.Name} Explain=${data.Explain}` );
    },
    

    默认设置

    DefaultSymbol

    默认股票代码

    DefaultChart

    默认图形类型 “Minute”, “KLine”
    例子 直接在视图层配置就可以

    <HQChartControl ref="HQChartCtrl" DefaultChart="{Type:'KLine'}" DefaultSymbol="000001.sz"> </HQChartControl>
    

    说明

    内置的组件功能比较简单, 如果需要定制的,可以自己写一个组件,如何写hqchart组件可以参见
    HQChart实战教程40 - 如何制作hqchart组件(uniapp版本)

    完成示例代码

    index.vue

    <template>
    	
    	<div>
    		<div style='background-color:#101010;'>
    			<HQChartControl ref="HQChartCtrl" DefaultChart="{Type:'KLine'}" DefaultSymbol="000001.sz"> </HQChartControl>
    		</div>
    	
    		<!--   控制图1 !-->
    		<div class="button-sp-area">
    			<button class="mini-btn" type="default" size="mini" @click="ChangeMinutePeriod(1)">分时</button>
    			<button class="mini-btn" type="default" size="mini" @click="ChangeMinutePeriod(5)">5D</button>
    			<button class="mini-btn" type="default" size="mini" @click="ChangeKLinePeriod(0)">D</button>
    			<button class="mini-btn" type="default" size="mini" @click="ChangeKLinePeriod(1)">W</button>
    			<button class="mini-btn" type="default" size="mini" @click="ChangeKLinePeriod(4)">1M</button>
    			<button class="mini-btn" type="default" size="mini" @click="ChangeKLinePeriod(5)">15M</button>
    		</div>
    		
    	
    	</div>
    			
    </template>
    
    <script>
    
    import HQChartControl from '@/uni_modules/jones-hqchart2/js_sdk/HQChartControl.vue'
    
    	
    export default 
    {
    	components: { HQChartControl },
    	
    	data()
    	{
    		let data=
    		{
    			Symbol:'600000.sh',
    			ChartWidth:350,
    			ChartHeight:500,
    		};
    		
    		return data;
    	},
    	
    	onShow()
    	{
    		uni.getSystemInfo({
    		    success:  (res) =>
    			{
    				var width=res.windowWidth;
    				var height=res.windowHeight;
    		        this.ChartWidth=width;
    				this.ChartHeight=height-130;
    				this.$nextTick(()=>
    				{
    					this.CreateHQChart(); 
    				})
    		    }
    		});
    	},
    	
    	onHide()
    	{
    		this.ClearHQChart();
    	},
    	
    	onUnload()
    	{
    		this.ClearHQChart();
    	},
    	
    	methods:
    	{
    		CreateHQChart()
    		{
    			var chartHeight=this.ChartHeight;
    			let hqchartCtrl=this.$refs.HQChartCtrl;
    			//修改option
    			//hqchartCtrl.KLine.Option.
    			hqchartCtrl.NetworkFilter=this.NetworkFilter;
    			hqchartCtrl.SetSize(this.ChartWidth,chartHeight);
    			hqchartCtrl.OnSize();
    			hqchartCtrl.CreateHQChart();
    		},
    		
    		ClearHQChart()
    		{
    			let hqchartCtrl=this.$refs.HQChartCtrl;
    			if (hqchartCtrl) hqchartCtrl.ClearChart();
    		},
    		
    		ChangeMinutePeriod(days)
    		{
    			let hqchartCtrl=this.$refs.HQChartCtrl;
    			
    			hqchartCtrl.ChangeMinutePeriod(days);
    		},
    		
    		ChangeKLinePeriod(period)
    		{
    			let hqchartCtrl=this.$refs.HQChartCtrl;
    			
    			hqchartCtrl.ChangeKLinePeriod(period);
    		},
    		
    		NetworkFilter(data, callback)
    		{
    			console.log(`[App:NetworkFilter] Name=${data.Name} Explain=${data.Explain}` );
    		},
    	}
    }
    </script>
    
    <style>
    </style>
    
    

    交流QQ群: 950092318

    如果还有问题可以加交流QQ群: 950092318

    HQChart代码地址

    地址:github.com/jones2000/HQChart

    展开全文
  • HQChart使用教程63-uniapp使用renderjs+hqchart序步骤1. 安装依赖模块2. 创建 renderjs qhchart模块3. 使用HQChartCtrl对hqchart进行简单的封装4. page页面创建一个view元素绑定到HQChartCtrl5. 分时K线切换说明...

    uniapp的画布实在是太烂了, 导致app很卡, 但是h5页面却很流畅,如果可以直接在uniapp里使用h5页面这样用户体验就很好了。

    步骤

    1. 安装依赖模块

    安装 hqchart 和 jquery 这2个模块
    npm i jquery
    npm i hqchart

    2. 创建 renderjs qhchart模块

    这里我把模块名命名为HQChartCtrl

    <script module="HQChartCtrl" lang="renderjs" type="module">
    import HQChart from 'hqchart'; 
    .......
    export default 
    {
    	name:'HQChartCtrl',
    	......
    }
    	
    

    3. 使用HQChartCtrl对hqchart进行简单的封装

    这个使用 view id为’kline’ 来绑定到hqchart中
    下面的封装的方法和说明

    CreateKLineChart() 	//创建K线图
    CreateMinuteChart()	//创建分时图
    ClearDivDOM()   //清空hqchart内部创建的dom.
    ChangePeriod(period)  //K线周期切换
    ChangeSymbol(symbol)   //分时|K线切换股票
    ChangeDays(dayCount)  //分时切换显示天数
    ClearChart()		//清空hqchart实例, 在页面退出或隐藏的时候需要清空实例和定时器
    ChartOperator(value) 	//外部操作HQChartCtrl的统一接口 value:{ID:操作ID, Value:数值 }
    

    4. page页面创建一个view元素绑定到HQChartCtrl

    创建一个id为“kline"的view,这样hqchartctrl就可以获取这个dom并操作它。

    <template>
    	<view class="kLine-main" style="height: 1200rpx;width: 750rpx;">
    		<view class="kline" id="kline" ref="kline" style="height: 1000rpx;width: 750rpx;" :prop="ChartOperatorData" :change:prop="HQChartCtrl.ChartOperator"></view>
    

    绑定变量ChartOperatorData修改以后触发HQChartCtrl操作事件HQChartCtrl.ChartOperator。 这个好像是renderjs特殊有的, 其他我也找到怎么去操作hqchartctrl的方法。

    5. 分时K线切换说明

    这里使用了同一个view来切换分时和K线,这样就避免了2个view来会切换。 所以在切换的时候需要清空原来的实例及hqchart创建的dom.
    具体看教程
    HQChart实战教程8-如何手动重新初始化hqchart

    这样就可以在app上运行h5的hqchart.

    如果还有问题可以加交流QQ群: 950092318
    demo项目在群文件中"umiapp-renderjs-hqchart-demo.2020.06.24.01.rar"

    6.效果图

    在这里插入图片描述

    注意

    在 renderjs 里面的数据请求使用jquery, uni的网络请求接口在里面是无法调用的,不清楚为什么。

    完整代码

    <template>
    	<view class="kLine-main" style="height: 1200rpx;width: 750rpx;">
    		<view class="kline" id="kline" ref="kline" style="height: 1000rpx;width: 750rpx;" :prop="ChartOperatorData" :change:prop="HQChartCtrl.ChartOperator"></view>
    		
    		<div class="button-sp-area">
    			<button class="mini-btn" type="default" size="mini" @click="ChangePeriod(0)">日线</button>
    			<button class="mini-btn" type="default" size="mini" @click="ChangePeriod(1)">周线</button>
    			<button class="mini-btn" type="default" size="mini" @click="ChangePeriod(4)">1分钟</button>
    			<button class="mini-btn" type="default" size="mini" @click="ChangePeriod(6)">15分钟</button>
    			<button class="mini-btn" type="default" size="mini" @click="ChangeDays(1)">分时</button>
    			<button class="mini-btn" type="default" size="mini" @click="ChangeDays(5)">5日分时</button>
    		</div>
    		
    		<div class="button-sp-area">
    			<button class="mini-btn" type="default" size="mini" @click="ChangeSymbol('000001.sz')">000001.sz</button>
    			<button class="mini-btn" type="default" size="mini" @click="ChangeSymbol('600000.sh')">600000.sh</button>
    		</div>
    		
    	</view>
    	
    </template>
    
    <script>
    export default 
    {
    	name: 'kLine-main', //k线 图表
    	data() 
    	{
    		var data=
    		{
    			ChartOperatorData: 
    			{
    				ID:null,		//操作ID 1=切换周期  2=切换股票 3=销毁 4=分时图
    				Value:null		//数值
    			}
    		}
    		
    		return data;
    	},
    	
    	created() 
    	{
    		
    	},
    	mounted() 
    	{
    		
    	},
    	
    	methods: 
    	{
    		ChangePeriod(period)
    		{
    			this.ChartOperatorData.ID=1;
    			this.ChartOperatorData.Value=period;
    		},
    		
    		ChangeSymbol(symbol)
    		{
    			this.ChartOperatorData.ID=2;
    			this.ChartOperatorData.Value=symbol;
    		},
    		
    		ChangeDays(dayCount)
    		{
    			this.ChartOperatorData.ID=4;
    			this.ChartOperatorData.Value=dayCount;
    		}
    	}
    };
    </script>
    
    <script module="HQChartCtrl" lang="renderjs" type="module">
    import HQChart from 'hqchart'; 
    var g_KLine = 
    {
    	JSChart: null
    };
    
    var g_Minute=
    {
    	JSChart:null
    }
    
    /* 关闭日志
    HQChart.Chart.JSConsole.Chart.Log=()=>{ }
    HQChart.Chart.JSConsole.Complier.Log=()=>{ }
    */
    
    function DefaultData() {}
    
    DefaultData.GetKLineOption = function() 
    {
    	let data = 
    	{
    		Type: '历史K线图',
    		
    		Windows: //窗口指标
    		[
    			{ Index: 'MA', Modify: false, Change: false }, 
    			{ Index: 'VOL', Modify: false, Change: false }, 
    			{ Index: 'MACD', Modify: false, Change: false },
    		],
    
    		IsAutoUpdate: true,
    		AutoUpdateFrequency: 30000, //数据更新频率
    		IsCorssOnlyDrawKLine: true, //十字光标只能在K线上
    		EnableScrollUpDown: true, //允许手势上下操作滚动页面
    		CorssCursorTouchEnd: true, //手势结束十字光标自动隐藏
    		
    		CorssCursorInfo:  	//十字光标刻度设置
    		{ 
    			Left: 2,
    			Right: 2,
    			Bottom: 1,
    		}, 
    		
    		Border: 	//边框
    		{
    			Left: 1,
    			Right: 1, //右边间距
    			Top: 25,
    			Bottom: 25
    		},
    
    		KLine: 
    		{
    			Right: 0, //复权 0 不复权 1 前复权 2 后复权
    			Period: 0, //周期: 0 日线 1 周线 2 月线 3 年线
    			PageSize: 60,
    			IsShowTooltip: false,
    			DrawType: 0 //K线类型 0=实心K线柱子 1=收盘价线 2=美国线 3=空心K线柱子 4=收盘价面积图
    		},
    		
    		//子框架设置 (Height 窗口高度比例值)
    		Frame: 
    		[
    			{
    				SplitCount: 3, //最多输出3个分隔线
    				Height: 5,
    				IsShowLeftText: false, //不显示左边刻度文字
    				IsShowRightText: true, //显示右边刻度文字
    				Custom: 
    				[
    					{
    						Type: 0,
    						Position: 'right'
    					}
    				]
    			},
    			{
    				SplitCount: 2,
    				Height: 2,
    				IsShowLeftText: true,
    				IsShowRightText: false
    			},
    			{
    				SplitCount: 2,
    				Height: 2,
    				IsShowLeftText: true,
    				IsShowRightText: false
    			}
    		],
    		
    		ExtendChart:
    		[
    			{ Name: 'KLineTooltip' } //开启手机端tooltip
    		]
    	};
    
    	return data;
    };
    
    DefaultData.GetMinuteOption=function()
    {
        var option= 
        {
            Type:'分钟走势图',   //创建图形类型
                
            Windows: //窗口指标
            [
                { Index: 'MACD', Modify: false, Change: false },
            ], 
                
            IsAutoUpdate:true,       	//是自动更新数据
    		AutoUpdateFrequency: 30000, //数据更新频率
            DayCount:1,              	//1 最新交易日数据 >1 多日走势图
            IsShowRightMenu:false,   	//是否显示右键菜单
            CorssCursorTouchEnd:true,
    		
    		CorssCursorInfo:  	//十字光标刻度设置
    		{ 
    			Left: 2,
    			Right: 2,
    			Bottom: 1,
    		}, 
    		
            MinuteLine:
            {
                //IsDrawAreaPrice:false,      //是否画价格面积图
            },
     
            Border: //边框
            {
                Left:1,    //左边间距
                Right:1,   //右边间距
                Top:20,
                Bottom:20
            },
                
            Frame:  //子框架设置
            [
                {SplitCount:3},
                {SplitCount:2},
                {SplitCount:3},
            ],
     
            ExtendChart:    //扩展图形
            [
                {Name:'MinuteTooltip' }  //手机端tooltip
            ],
        };
     
        return option;
    }
    
    export default 
    {
    	name:'HQChartCtrl',
    	
    	data()
    	{
    		var data=
    		{
    			Symbol:'000001.sz',
    			Period:0,	//周期
    			
    			DayCount:1,	//分时图 天数
    		};
    		
    		return data;
    	},
    	
    	mounted() 
    	{
    		console.log('视图层加载完毕');
    		this.CreateKLineChart();
    	},
    	
    	methods: 
    	{
    		CreateKLineChart() 	//创建K线图
    		{
    			if (g_KLine.JSChart) return;
    			
    			if (g_Minute.JSChart)
    			{
    				this.ClearChart();
    				this.ClearDivDOM();
    			}
    
    			var option=DefaultData.GetKLineOption();
    			option.Symbol=this.Symbol;
    			option.KLine.Period=this.Period;
    
    			var blackStyle = HQChart.Chart.HQChartStyle.GetStyleConfig(HQChart.Chart.STYLE_TYPE_ID.BLACK_ID); //读取黑色风格配置
    			HQChart.Chart.JSChart.SetStyle(blackStyle);
    			document.getElementById('kline').style.backgroundColor=blackStyle.BGColor;	//div背景色设置黑色
    
    			g_KLine.JSChart = HQChart.Chart.JSChart.Init(document.getElementById('kline'));
    			g_KLine.JSChart.SetOption(option);
    
    			console.log('创建K线图结束');
    		},
    		
    		CreateMinuteChart()	//创建分时图
    		{
    			if (g_Minute.JSChart) return;
    			
    			if (g_KLine.JSChart)
    			{
    				this.ClearChart();
    				this.ClearDivDOM();
    			}
    			
    			var option=DefaultData.GetMinuteOption();
    			option.Symbol=this.Symbol;
    			option.DayCount=this.DayCount;
    			
    			var blackStyle = HQChart.Chart.HQChartStyle.GetStyleConfig(HQChart.Chart.STYLE_TYPE_ID.BLACK_ID); //读取黑色风格配置
    			HQChart.Chart.JSChart.SetStyle(blackStyle);
    			document.getElementById('kline').style.backgroundColor=blackStyle.BGColor;	//div背景色设置黑色
    			
    			g_Minute.JSChart = HQChart.Chart.JSChart.Init(document.getElementById('kline'));
    			g_Minute.JSChart.SetOption(option);
    		},
    		
    		ClearDivDOM()   
    		{
    			var divKLine=document.getElementById('kline');
    			while (divKLine.hasChildNodes()) 
    			{
    				divKLine.removeChild(divKLine.lastChild);
    			} 
    			
    		},
    		
    		//对外接口
    		ChangePeriod(period)  //周期切换
    		{
    			this.Period=period;
    			if (!g_KLine.JSChart) 
    				this.CreateKLineChart();
    			else 
    				g_KLine.JSChart.ChangePeriod(period);
    		},
    		
    		ChangeSymbol(symbol)   //切换股票
    		{
    			this.Symbol=symbol;
    			if (g_KLine.JSChart) g_KLine.JSChart.ChangeSymbol(symbol);
    			else if (g_Minute.JSChart) g_Minute.JSChart.ChangeSymbol(symbol);
    		},
    		
    		ChangeDays(dayCount)
    		{
    			this.DayCount=dayCount;
    			if (!g_Minute.JSChart)
    				this.CreateMinuteChart();
    			else
    				g_Minute.JSChart.ChangeDayCount(dayCount);
    		},
    		
    		ClearChart()
    		{
    			if (g_KLine.JSChart)
    			{
    				g_KLine.JSChart.StopAutoUpdate();
    				g_KLine.JSChart=null;
    			}
    			
    			if (g_Minute.JSChart)
    			{
    				g_Minute.JSChart.StopAutoUpdate();
    				g_Minute.JSChart=null;
    			}
    		},
    		
    		ChartOperator(value)
    		{
    			switch(value.ID)
    			{
    			case 1:
    				this.ChangePeriod(value.Value);
    				break;
    			case 2:
    				this.ChangeSymbol(value.Value);
    				break;
    			case 3:
    				this.ClearChart();
    				break;
    			case 4:
    				this.ChangeDays(value.Value);
    				break;
    			}
    		}
    	}
    };
    </script>
    <style lang="scss">
    .kline {
    }
    </style>
    

    HQChart代码地址

    地址:github.com/jones2000/HQChart

    如果教程或hqchart对你有帮助, 请在git上star,教程点下赞 。谢谢~~

    展开全文
  • HQChart 股市图表

    2021-06-25 22:57:02
    HQChart是国内第1个基于传统PC股票客户端软件(C++)移植到js/py平台的一个项目, 包含K线图图形库及麦语法(分析家语法)指标执行器. 平台支持:js, vue, uniapp, 小程序
  • HQChart实战教程40 - 如何制作hqchart组件 uniapp版本hqchart组件预备知识样例效果图组件创建步骤1 创建组件模板元素注意点2. 创建hqchart实例容器注意点3. 创建hqchart配置数据图形大小idsymbolChartType配置3. ...
  • HQChart实战教程10-全ws数据对接HQChart(火币网数据对接实战需求第3方数据接口一分钟历史k线最新一分钟K线数据订阅对接步骤1. 取消hqchart自动更新2. 设置NetworkFilter回调3. NetworkFilter4. 简单的封装下ws数据...
  • 基于HQChart的后台单股票指标计算服务应用场景改造HQChart后台请求出来类 (JSIndexController)使用restify建立一个apiweb服务制作docker镜像HQChart代码地址 应用场景 最近在提供数据api的时候,有客户提出需要k线...
  • HQChart使用教程82-动态修改叠加指标参数叠加指标参数步骤1. 获取所有叠加指标实例2. 修改你需要的指标参数3. 更新修改的叠加指标完整demo代码交流QQ群: 950092318HQChart代码地址 叠加指标参数 hqchart目前UI上没有...
  • HQChart实战教程44-多指标窗口动态增长高度多指标窗口1. 注册初始化完成事件2. 重载内置的指标窗口高度分配计算函数3. 动态计算指标窗口一共的高度4. 每个指标窗口高度计算函数大概的流程图交流QQ群: 950092318...
  • HQChart使用教程83-K线图最高最低价显示配置K线图最高最低价是否显示最高最低加颜色配置配置位置例子交流QQ群: 950092318HQChart代码地址 K线图最高最低价 HQChart支持最高最低价颜色,字体,Y轴上下偏移,左右箭头...
  • 为您提供HQChart行情图形库及麦语法脚本执行器下载,HQChart是一个基于国内传统PC股票客户端软件(C++)移植到js/py平台的一个项目,包含K线图图形库及麦语法(分析家语法)指标执行器。js版本的K线图形库支持原生js,...
  • HQChart使用教程60-新版k线训练使用教程样例页面K线训练重构创建K线图操作接口下一个K线自动/停止自动移动K线买卖股票K线移动监听事件买卖数据计算K线背景色设置功能买卖图标修改完整代码HQChart代码地址如果教程或...
  • HQChart实战教程18 - 多股同列多股同列步骤1. 创建div数组2. 创建多个hqchart3. 多个hqchart位置计算4. 鼠标和键盘事件5. 切换一屏显示K线图个数6. 切换周期7.切换指标HQChart代码地址完整代码 多股同列 在一屏中...
  • HQChart是一个基于国内传统PC股票客户端软件(C++)移植到js/py平台的一个项目,包含K线图图形库及麦语法(分析家语法)指标执行器。 js版本的K线图形库支持原生js,VUE,uniapp,小程序。 麦语法(分析家语法)指标执行器...
  • HQChart使用教程79-网络异常处理接口demo地址异常处理常见的异常提示信息接口重新请求数据例子交流QQ群: 950092318HQChart代码地址个人爱好摄影/模型 demo地址 ...异常处理 在出现异常的时候, 在K线图上显示异常信息....
  • HQChart实战教程28-动态切换颜色风格动态换肤步骤1. 准备多套配色方案2. 动态切换风格目前只支持h5, app,小程序不支持.交流QQ群: 950092318HQChart代码地址 动态换肤 通过按钮可以动态切换K线图风格。 步骤 1. ...
  • HQChart实战教程17 -K线沙盘推演沙盘推演hqchart接口说明SandTableOperator沙盘操作接口GetKDataInfo获取原始K线信息ChartOperatorK线操作控制K线标识demo地址代码说明开始沙盘推演前进后退修改K线删除数据结束沙盘...
  • HQChart使用教程80-自定义指标标题信息指标标题demo地址自定义显示步骤关闭内置的指标标题显示注册指标信息回调事件回调事件参数说明eventdataobj完整demo代码交流QQ群: 950092318HQChart代码地址 指标标题 显示当前...
  • HQChart使用教程81-自定义指标窗口高度指标窗口高度自定义窗口高度步骤1. 注册图形创建完成回调2. 重载内置的指标窗口计算函数3. 实现自己的窗口高度计算交流QQ群: 950092318HQChart代码地址个人爱好摄影/模型 指标...
  • 快速创建一个K线图页面HQChart介绍demo页面代码Option的配置项说明 效果图 HQChart介绍 功能: 提供K线,走势图, 支持通达信语法指标(麦语法), 画图工具,等等… 支持PC端页面, 小程序,手机端页面。 地址...
  • 下载"HQChart指标计算引擎"动态库 git上可以下载 https://github.com/jones2000/HQChart 安装 vs2019 VC_redist.x64 运行库, 网上自行下载下 安装py 3.7 64位程序 目录介绍 HQChartPy2.pyd, libcrypto-1_1-x...
  • HQChart(C++)指标计算引擎-介绍

    千次阅读 2020-07-20 16:44:41
    HQChart指标计算引擎介绍麦语法/分析家语法开发语言版本C++版本构架调用方式速度 麦语法/分析家语法 HQChart指标语法是基于麦语法(分析家语法)来实现的。兼容传统pc终端(通达信,东方财富等)指标脚本,降低迁移...
  • HQChart实战教程1-外汇分时图

    千次阅读 2019-11-26 14:21:38
    HQChart实战教程1-外汇分时图需求HQChart需要的数据品种代码网络协议名字网络协议回调分时数据下载当天全量数据下载全量数据转hqchart格式增量数据更新下载增量数据更新到hqchart自动更新频率控制 需求 对接第3方...
  • HQChart实战教程6-自定义分时图

    千次阅读 2020-02-04 13:13:06
    HQChart实战教程6-自定义分时图分时图要求具体步骤步骤1(自定义品种后缀)步骤2(定义交易区间段)步骤3(定义X轴分割线)步骤4 (替换自定义品种接口函数)步骤5 (接口数据)完整代码 分时图 hqchart分时图是根据不...
  • HQChart实战教程13-火币网ws数据对接K线uniapp版本效果图对接步骤uniapp websockethqchart设置数据完整代码HQChart代码地址 效果图 对接步骤 对接步骤和VUE对接是一致的。这里我就不多说了。具体可以看上一节教程...
  • HQChart实战教程30-配置画图工具模板K线画图步骤ChartDrawStorageCache画图工具数据结构说明ClassNameSymbolGuidPeriodRightValueYValueDateTimeFrameIDLineColorLineWidthAreaColor加载画布工具交流QQ群: 950092318...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 841
精华内容 336
关键字:

HQChart