jones2000 / hqchart Goto Github PK

HQChart - H5, 微信小程序沪深/港股/数字货币/期货/美股 K线图(kline),走势图,缩放,拖拽,十字光标,画图工具,截图,筹码图. 分析家语法,通达信语法,(麦语法),第3方数据替换接口

Home Page: https://jones2000.github.io/HQChart/webhqchart.demo/samples/kline_index_edit.html

License: Apache License 2.0

JavaScript 95.39% CSS 0.40% HTML 1.70% Makefile 0.01% Batchfile 0.01% Vue 1.66% Python 0.78% Dockerfile 0.01% C# 0.02% C 0.01% C++ 0.03%

candlestick-chart china-stock trading-view stock chart canvas javascript html5 h5 wechat

hqchart's Introduction

hqchart's People

Contributors

Stargazers

Watchers

Forkers

juvu hunshikan guyueyuqi wsxwqn926 emaiqi xyz1041931294 yy1987 quanterstudio github-wuzhh agentwx sfidea midas66 bella314 huasir wujimmy apc2018 jamescube systemtrader ooloveoo nehcuh qiaodongliang rubikplanet red12345678 chenchuanbao freestockso woozhu lvhuajun amangqq hi4me fucora dlkris liangwenquan puwei0000 shidatonglin aws-ethan woody2028 mm924320206 slashvortal zw900420 zyxyuanxiao lesonwu liqingming yejiayuan163 280185386 miyazawa00 mineralres callmeyan microengine sagilyu davidalphafox icorecool cocoyimasa tokenchain a809704431 h-sven fellowfun li-yiang johnnyvr z1041950008 hu1024 zmzrobin rickyyao2019 1730901273 jintangmai wocclyl ithander mambaji a944908017 miaowuhtml goldxwang aidaban southwhale lyonleelpl gangzisp kaneflysky ccfoxexchange shenchao890216 jojochan92 ranyuhan seethinks qq1119094779 wiigin songhyeky0 allrand yutiansut gaoobin linbaozhong cxxcxxcxx yongxin2509 zhouyalongs oneharder luckfu deepblueparticle huangweiboy2 sinanindex southtop vivicai ashghost d1jk bobowuji

hqchart's Issues

请问支持在标记点位置自定义创建备注或者提示吗？有没有完整的配置文档参考？

web端不支持强制横屏模式的问题

我想知道既然web端不支持强制横屏模式, dom元素可以通过css3的translate方式旋转90度达到切换横屏效果, hqChart到底是什么方式实现canvas横屏模式的呢? 自己使用原生canvas实现过简单的k线绘制

分时图如何标点

大大有一个问题，就是使用分时图，怎么对买入的点进行标注，比如买涨的时候是红点，买跌的时候是绿点，然后又如何定时清除这些点

多图同列时，附图指标的控制错乱

在多图同列状态下，附图指标的关闭按钮只会显示到第一个图，点击关闭按钮时则从最后一个开始依次关闭。另外，无论在哪个子窗口移动光标，价格提示框都只会在第一个图显示。

还没研究您的源代码，只是修改了下您的测试页面 webhqchart.demo/demo/bit_demo.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 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" />

    <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 src="../jscommon/umychart.style.js"></script>       <!-- 白色风格和黑色风格配置信息 -->

    <script src='bit_demo_testdata.js'></script> <!--测试数据 分钟线全量数据 -->
    <script src='bit_demo_testdata2.js'></script> <!--测试数据 分钟线增量数据 -->

    <script src='bit_demo_testdata3.js'></script> <!--测试数据 日线全量数据 -->
    <script src='bit_demo_testdata4.js'></script> <!--测试数据 日线增量数据 -->
    <style>
        body{
            width:100%;
            height:100%;
            overflow:hidden;
        }
        .chart{display: inline-block;float:left;}
    </style>
</head>
<body>
    <div id="kline" class="chart"></div>
    <div id="kline1" class="chart"></div>
    <div id="kline2" class="chart"></div>
    <div id="kline3" class="chart"></div>

    
    <script>

        //简单的把K线控件封装下
        function KLineChart(divKLine)
        {
            this.DivKLine=divKLine;
            this.Chart=JSChart.Init(divKLine);   //把K线图绑定到一个Div上
            var self=this;
            //K线配置信息
            this.Option= {
                Type:'历史K线图',   //创建图形类型
                
                Windows: //窗口指标
                [
                    {Index:"MA", Modify:true,Change:true},
                    {Index:"RSI", Modify:true,Change:true}, 
                ], 

                
                Symbol:'BTCUSDT.BIT',
                //Symbol:'600000.sh',
                IsAutoUpdate:true,          //是自动更新数据
                AutoUpdateFrequency:5000,   //数据更新频率
    
                IsShowRightMenu:true,          //右键菜单
                IsShowCorssCursorInfo:true,    //是否显示十字光标的刻度信息
                //CorssCursorTouchEnd:true,
    
                KLine:  //K线设置
                {
                    DragMode:1,                 //拖拽模式 0 禁止拖拽 1 数据拖拽 2 区间选择
                    Right:0,                    //复权 0 不复权 1 前复权 2 后复权
                    Period:0,                   //周期 0 日线 1 周线 2 月线 3 年线 
                    MaxReqeustDataCount:1000,   //数据个数
                    MaxRequestMinuteDayCount:10, //分钟数据取5天
                    PageSize:50,               //一屏显示多少数据
                    //Info:["互动易","大宗交易",'龙虎榜',"调研","业绩预告","公告"],       //信息地雷
                    IsShowTooltip:true,                 //是否显示K线提示信息
                },
    
                KLineTitle: //标题设置
                {
                    IsShowName:true,       //不显示股票名称
                    IsShowSettingInfo:true //不显示周期/复权
                },

                NetworkFilter:function(data, callback) { self.NetworkFilter(data, callback); } ,   //绑定网络协议回调
    
                Border: //边框
                {
                    Left:5,         //左边间距
                    Right:70,       //右边间距
                    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
                ],
            };
                 
            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();
                // 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();
            }

            this.NetworkFilter=function(data, callback)
            {
                console.log('[NetworkFilter] data', data);
                switch(data.Name)
                {
                    case 'KLineChartContainer::ReqeustHistoryMinuteData':   //1分钟全量数据下载
                        this.RequestHistoryMinuteData(data, callback);
                        break;
                    case 'KLineChartContainer::RequestMinuteRealtimeData':  //1分钟增量数据更新
                        this.RequestMinuteRealtimeData(data,callback);
                        break;
                    case 'KLineChartContainer::RequestHistoryData':     //日线全量数据下载
                        this.RequestHistoryData(data,callback);
                        break;
                    case 'KLineChartContainer::RequestRealtimeData':    //日线增量数据更新
                        this.RequestRealtimeData(data,callback);
                        break;
                }
            }

            this.RequestHistoryMinuteData=function(data, callback)
            {
                data.PreventDefault=true;
                var self=this;
                var symbol=data.Request.Data.symbol;

                setTimeout(() => {
                    self.RecvHistoryMinuteData(BIT_TEST_DATA,callback); 
                }, 200);
               
            }

            this.RecvHistoryMinuteData=function(data, callback)
            {
                var hqChartData={code:0, data:[]};
                hqChartData.symbol='BTCUSDT.BIT';
                hqChartData.name='BTCUSDT';

                var yClose=null;
                for(var i=data.data.length-1; i>=0; --i)
                {
                    var item=data.data[i];
                    var timestamp = item.id;
                    var dateTime = new Date();
                    dateTime.setTime(timestamp * 1000);

                    var date=dateTime.getFullYear()*10000+(dateTime.getMonth()+1)*100+dateTime.getDate();
                    var time=dateTime.getHours()*100+dateTime.getMinutes();
                    var newItem=[date,yClose, item.open, item.high, item.low, item.close, item.vol, item.amount, time];

                    yClose=item.close;
                    hqChartData.data.push(newItem);
                }

                callback(hqChartData);
            }

            this.RequestMinuteRealtimeData=function(data,callback)
            {
                data.PreventDefault=true;
                var self=this;
                var symbol=data.Request.Data.symbol;

                setTimeout(() => {
                    self.RecvMinuteRealtimeData(BIT_TEST_DATA2,callback); 
                }, 200);
            }

            this.RecvMinuteRealtimeData=function(data,callback)
            {
                var hqChartData={code:0, data:[], ver:2.0 };
                hqChartData.symbol='BTCUSDT.BIT';
                hqChartData.name='BTCUSDT';

                var yClose=null;
                for(var i=data.data.length-1; i>=0; --i)
                {
                    var item=data.data[i];
                    var timestamp = item.id;
                    var dateTime = new Date();
                    dateTime.setTime(timestamp * 1000);

                    var date=dateTime.getFullYear()*10000+(dateTime.getMonth()+1)*100+dateTime.getDate();
                    var time=dateTime.getHours()*100+dateTime.getMinutes();
                    var newItem=[date,yClose, item.open, item.high, item.low, item.close, item.vol, item.amount, time];

                    yClose=item.close;
                    hqChartData.data.push(newItem);
                }

                callback(hqChartData);
            }

            this.RequestHistoryData=function(data,callback)
            {
                data.PreventDefault=true;
                var self=this;
                var symbol=data.Request.Data.symbol;

                setTimeout(() => {
                    self.RecvHistoryData(BIT_TEST_DATA3,callback); 
                }, 200);
            }

            this.RecvHistoryData=function(data,callback)
            {
                var hqChartData={code:0, data:[]};
                hqChartData.symbol='BTCUSDT.BIT';
                hqChartData.name='BTCUSDT';

                var yClose=null;
                for(var i=data.data.length-1; i>=0; --i)
                {
                    var item=data.data[i];
                    var timestamp = item.id;
                    var dateTime = new Date();
                    dateTime.setTime(timestamp * 1000);

                    var date=dateTime.getFullYear()*10000+(dateTime.getMonth()+1)*100+dateTime.getDate();
                    var time=dateTime.getHours()*100+dateTime.getMinutes();
                    var newItem=[date,yClose, item.open, item.high, item.low, item.close, item.vol, item.amount];

                    yClose=item.close;
                    hqChartData.data.push(newItem);
                }

                callback(hqChartData);
            }

            this.RequestRealtimeData=function(data,callback)
            {
                data.PreventDefault=true;
                var self=this;
                var symbol=data.Request.Data.symbol;

                setTimeout(() => {
                    self.RecvRealtimeData(BIT_TEST_DATA4,callback); 
                }, 200);
            }

            this.RecvRealtimeData=function(data,callback)
            {
                var stock={symbol:'BTCUSDT.BIT', name:'BTCUSDT'};
                var hqChartData={code:0, stock:[stock]};

                var item=data.data[0];   //取最新的一条更新
                var timestamp = item.id;
                var dateTime = new Date();
                dateTime.setTime(timestamp * 1000);

                var date=dateTime.getFullYear()*10000+(dateTime.getMonth()+1)*100+dateTime.getDate();
                var time=dateTime.getHours()*100+dateTime.getMinutes();

                stock.date=date;
                stock.open=item.open;
                stock.high=item.high;
                stock.low=item.low;
                stock.vol=item.vol;
                stock.price=item.close;
                stock.amount=item.amount;
                //stock.yclose; 最好前收盘也要

                callback(hqChartData);
            }
        }

        $(function () 
        {
            WebFont.load({ custom: { families: ['iconfont'] } });   //预加载下iconfont资源

            var ww = $(window).width()/2, wh = $(window).height()/2, klineControl={};
            $('.chart').width(ww).height(wh);
            $('.chart').each(function(i,n){
                var id = $(this).attr('id');
                klineControl[id] = new KLineChart(document.getElementById(id));
                klineControl[id].Create();
            });
            $(window).resize(function(){
                var ww = $(window).width()/2, wh = $(window).height()/2;
                $('.chart').width(ww).height(wh);
            });
            // var klineControl=new KLineChart(document.getElementById('kline'));
            // klineControl.Create();
            // var klineControl1=new KLineChart(document.getElementById('kline1'));
            // klineControl1.Create();
        })

    </script>  
</body>  
</html>

Is there any example with standard Javascript for web browser (Without NodeJS)

Hi,

Do you have examples for browser usage without nodejs please ?

Thank you

HOW TO SET KLINE DATA, UPDATE KLINE DATA?

在node16版本中，无法通过npm安装hqchart

node16不支持node-sass v4，安装的时候会编译失败，我看dependencies中也安装了sass，node-sass应该是不需要的，建议将node-sass从devDependencies中删除

vue版本的如何提换成自己的数据呢

vue版本的如何提换成自己的数据呢，在哪里填充自己的数据呢，没有像serves那种吗

Copyright please ? is it free ?

Hi,

Is it free for commercial usage ?

Thank you

网络连接断开，请检查客户端及网络是否正常

运行后出现如下信息：wss://openmd.shinnytech.com/t/md/front/mobile 的网络连接断开，请检查客户端及网络是否正常

请问支持秒级周期的K线吗，比如10s周期的K线图

如果在这个目前项目的基础上改，工作量大吗？难度如何？

Javascript刚入门不久。

vueVersion为3的时候，k线图无法拖动和缩放

作者您好，我在uni-app中新建项目，然后在插件市场https://ext.dcloud.net.cn/plugin?id=4591#rating 导入插件，将您测试项目中的hqchart2_test/index.vue文件复制到我所建的项目中，vueVersion:3，然后运行，能跑起来，但是无法缩放，和移动,
如果把vueVersion改成2就正常

大佬，别忽略掉VUE和VUE 3 用户，什么时候demo也能更新到VUE 3

订单流测试数据

demo_orderflow 是否可以考虑将 [ 订单流测试数据 ] 抽离到localdata中呢？这样对于一些并不擅长前端的同学可以更友好？

滚动条,部分区域黑色

我根据案例设置了滚动条.但是部分区域是黑色的.能帮我看一下是什么原因吗.

访问地址:http://121.5.196.159:9090/demo/index.html

分析家周期统计类的函数增加支持周期数组

目前好多周期类统计的函数只支持单数值周期，不支持数组周期，
如MA(data,n) n是周期。
n分2种数值类型

一个单数值如10，
n也可以是一个数组，如[10, 5 ,6 ......] 统计不同周期数据

开一个坑，逐步对这些函数支持周期数组 (c++, js , py 这3个版本统一增加)

小程序版本导出换成ES Module

开坑，目前小程序版本使用commonjs，好像vue3里面不能用，需要换成ES Module.

KLine.MaxReqeustDataCount typo

KLine.MaxReqeustDataCount, request写错了。

k线最左边时间显示的问题

您好，k线滑到最左边，最早的一个时间点永远是2015年，这明显不对，请您抽时间看一下

视图放大

使用自己的接口，调用this.KLine.JSChart.JSChartContainer.RecvMinuteHistoryData(hqChartData);进行传入数据。但是数据传入之后视图没有调用
，没有调用成功放大操作

小程序怎么动态的根据数据设置柱子的颜色样式

求助，微信小程序里，本地的数据怎么动态设置柱子是空心还是实心，然后动态配置颜色。

KLineChartContainer::ReqeustHistoryMinuteData

Request 写错了

麦语言的各种指标公式和通达信一样不支持FOR循环和数组吗

看了函数文档貌似这个实现的麦语言的各种指标公式和通达信一样不支持FOR循环和数组咧，请问需要些循环语句的指标公式如何实现呢？其他的股票软件都支持for循环，除了这个通达信以外

index.js 和 vendor.js 文件太大了。能不能优化下？

Time: 3482ms
Asset Size Chunks Chunk Names
535877f50039c0cb49a6196a5b7517cd.woff 28.2 kB [emitted]
732389ded34cb9c52dd88271f1345af9.ttf 56 kB [emitted]
index.js 8.56 MB 0 [emitted] [big] index
vendor.js 6.3 MB 1 [emitted] [big] vendor
index.html 2.48 kB [emitted]

vue方式，本地建立服务器，首次请求需要1分钟才能刷新。