npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

hqchart

v1.1.14280

Published

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

Downloads

9,751

Readme

介绍

HQChart

功能:

  1. K线图
  • 支持前复权,后复权
  • 支持日线,月线,周线,年线.分钟线
  • 主图支持股票叠加
  • K线形状支持 空心K线,实心K线,美国线,收盘价线
  • 支持常用指标指标(目前以录入系统指标80多个),支持自定义通达信语法脚本指标( 均线,BOLL,MACD,KDJ,VOL,RSI,BRAR,WR,BIAS,OBV,DMI,CR,PSY,CCI, DMA,TRIX,VR,EMV,ROC,MIM,FSL,CYR,MASS,WAD,CHO ..... )
  • 支持画图工具(小程序不支持)
  • 线段,射线,矩形,圆弧线,水平线,趋势线,平行线,平行通道,价格通道线,文本,江恩角度线,阻速线,黄金分割,百分比线,波段线,三角形,对称角度,斐波那契周期线,平行四边形,圆, iconfont图片
  • 支持区间统计, 区间形态匹配 (微信小程序版本不支持)
  • 数据鼠标左右拖拽移动, 键盘移动十字光标移动,键盘缩放
  • 支持通达信语法指标
  • 支持五彩K线(目前录入系统五彩K线30多个), 支持自定义通达信语法脚本的五彩K线
  • 支持专家系统指标
  • 支持个股筹码图
  1. 走势图
  • 支持指标
  • 支持股票叠加
  • 支持沪深和港股,国内期货(开发中)
  • 分钟数据显示
  • 支持多日分钟数据显示

源码地址:

代码地址 github.com/jones2000/HQChart

第3放数据对接案例:

源码地址:https://github.com/jones2000/HQChart-Super 镜像地址:https://gitee.com/jones2000/HQChart-Super

依赖模块

jquery, babel-runtime.

Environment

Node >= 6

Start

  • Clone or download this repository
  • Enter your local directory, and install dependencies:
npm install

VUE用例

VUE创建走势图用例

<template>

    <div id="app2">
        <div id="minute" ref="minute" ></div>
    </div>

</template>

<script>

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.GetMinuteOption=function()
{
    var option= 
    {
        Type:'分钟走势图',   //创建图形类型
            
        Windows: //窗口指标
        [
            
        ], 
            
        IsAutoUpdate:true,       //是自动更新数据
        DayCount:1,                 //1 最新交易日数据 >1 多日走势图
        IsShowCorssCursorInfo:true, //是否显示十字光标的刻度信息
        IsShowRightMenu:true,       //是否显示右键菜单
        CorssCursorTouchEnd:true,

        MinuteLine:
        {
            //IsDrawAreaPrice:false,      //是否画价格面积图
        },

        Border: //边框
        {
            Left:1,    //左边间距
            Right:1,   //右边间距
            Top:20,
            Bottom:20
        },
            
        Frame:  //子框架设置
        [
            {SplitCount:3,StringFormat:0},
            {SplitCount:2,StringFormat:0},
            {SplitCount:3,StringFormat:0},
        ],

        ExtendChart:    //扩展图形
        [
            //{Name:'MinuteTooltip' }  //手机端tooltip
        ],
    };

    return option;
}


export default 
{
    data() 
    {
        var data=
        {
            Symbol:'600000.sh',

            Minute:
            {
                JSChart:null,
                Option:DefaultData.GetMinuteOption(),
            }
        };

        return data;

    },

    created()
    {
        
    },

    mounted()
    {
        this.OnSize();

        window.onresize = ()=> { this.OnSize(); }

        this.CreateMinuteChart();
    },
        
    methods:
    {
        OnSize()
        {
            var chartHeight = window.innerHeight-30;
            var chartWidth = window.innerWidth-30;


            var minute=this.$refs.minute;
            minute.style.width=chartWidth+'px';
            minute.style.height=chartHeight+'px';
        },

        CreateMinuteChart() //创建日线图
        {
            if (this.Minute.JSChart) return;
            this.Minute.Option.Symbol=this.Symbol;
            let chart=HQChart.Chart.JSChart.Init(this.$refs.minute);
            chart.SetOption(this.Minute.Option);
            this.Minute.JSChart=chart;
        },
    }
}

VUE创建K线图用例

<template>

    <div id="app2">
        <div id="kline" ref='kline'></div>
    </div>

</template>

<script>
  
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 () 
{
    let data = 
    {
        Type: '历史K线图', 
        
        Windows: //窗口指标
        [
            {Index:"MA",Modify: false, Change: false}, 
            {Index:"VOL",Modify: false, Change: false}
        ], 

        IsShowCorssCursorInfo:true,

        Border: //边框
        {
            Left:   1,
            Right:  1, //右边间距
            Top:    25,
            Bottom: 25,
        },

        KLine:
        {
            Right:1,                            //复权 0 不复权 1 前复权 2 后复权
            Period:0,                           //周期: 0 日线 1 周线 2 月线 3 年线 
            PageSize:70,
            IsShowTooltip:true
        },
        
    };

    return data;
}

export default 
{
    data() 
    {
        var data=
        {
            Symbol:'600000.sh',
            KLine: 
            {
                JSChart:null,
                Option:DefaultData.GetKLineOption(),
            },

        };

        return data;

    },

    created()
    {
        
    },

    mounted()
    {
        this.OnSize();

        window.onresize = ()=> { this.OnSize(); }

       this.CreateKLineChart(); 
    },
        
    methods:
    {
        OnSize()
        {
            var chartHeight = window.innerHeight-30;
            var chartWidth = window.innerWidth-30;

            var kline=this.$refs.kline;
            kline.style.width=chartWidth+'px';
            kline.style.height=chartHeight+'px';
            if (this.KLine.JSChart) this.KLine.JSChart.OnSize();
        },

        CreateKLineChart()  //创建K线图
        {
            if (this.KLine.JSChart) return;
            this.KLine.Option.Symbol=this.Symbol;
            let chart=HQChart.Chart.JSChart.Init(this.$refs.kline);
            chart.SetOption(this.KLine.Option);
            this.KLine.JSChart=chart;
        },

    }
}

React用例

React创建k线图用例

import React from 'react';
import HQChart from 'hqchart';

class kline extends React.Component {
    constructor(props) { //构造函数
        super(props);
        this.initCanvas = this.initCanvas.bind(this);
        this.state = {
            Symbol:'600000.sh',
            KLine: 
            {
                JSChart:null,
                Option:{
                    Symbol:'',
                    Type: '历史K线图', 
                    
                    Windows: //窗口指标
                    [
                        {Index:"MA",Modify: false, Change: false}, 
                        {Index:"VOL",Modify: false, Change: false}
                    ], 
             
                    IsShowCorssCursorInfo:true,
             
                    Border: //边框
                    {
                        Left:   1,
                        Right:  1, //右边间距
                        Top:    25,
                        Bottom: 25,
                    },
             
                    KLine:
                    {
                        Right:1,                            //复权 0 不复权 1 前复权 2 后复权
                        Period:0,                           //周期: 0 日线 1 周线 2 月线 3 年线 
                        PageSize:70,
                        IsShowTooltip:true
                    }
                    
                }
            }
        }
    }
    initCanvas() {

        if (this.state.KLine.JSChart) return;

        this.state.KLine.Option.Symbol=this.state.Symbol;
        let chart=HQChart.Chart.JSChart.Init(document.getElementById("time_graph_canvas"));
        chart.SetOption(this.state.KLine.Option);
        this.state.KLine.JSChart=chart;
    }

    componentDidMount() {
        this.initCanvas()
    }
    
    componentDidUpdate() {
        this.initCanvas()
    }
    render() {
        var chartHeight = window.innerHeight-30;
        var chartWidth = window.innerWidth-30;
        var styleText = {
            width: chartWidth+'px', 
            height: chartHeight+'px',
        };
        return (
          <div style={styleText} id="time_graph_canvas">
          </div>
        )
      }
}

export default kline;

React创建走势图用例

import React from 'react';
import HQChart from 'hqchart';

class minute extends React.Component {
    constructor(props) { //构造函数
        super(props);
        this.initCanvas = this.initCanvas.bind(this);
        this.state = {
            Symbol:'600000.sh',
            Minute:
            {
                JSChart:null,
                Option:{
                    Type:'分钟走势图',   //创建图形类型
                    Symbol:'',
                    Windows: //窗口指标
                    [
                        
                    ], 
                        
                    IsAutoUpdate:true,       //是自动更新数据
                    DayCount:1,                 //1 最新交易日数据 >1 多日走势图
                    IsShowCorssCursorInfo:true, //是否显示十字光标的刻度信息
                    IsShowRightMenu:true,       //是否显示右键菜单
                    CorssCursorTouchEnd:true,
            
                    MinuteLine:
                    {
                        //IsDrawAreaPrice:false,      //是否画价格面积图
                    },
            
                    Border: //边框
                    {
                        Left:1,    //左边间距
                        Right:1,   //右边间距
                        Top:20,
                        Bottom:20
                    },
                        
                    Frame:  //子框架设置
                    [
                        {SplitCount:3,StringFormat:0},
                        {SplitCount:2,StringFormat:0},
                        {SplitCount:3,StringFormat:0},
                    ],
            
                    ExtendChart:    //扩展图形
                    [
                        //{Name:'MinuteTooltip' }  //手机端tooltip
                    ],
                }
            }
        }
    }
    initCanvas() {

        if (this.state.Minute.JSChart) return;

        this.state.Minute.Option.Symbol=this.state.Symbol;
        let chart=HQChart.Chart.JSChart.Init(document.getElementById("time_graph_canvas"));
        chart.SetOption(this.state.Minute.Option);
        this.state.Minute.JSChart=chart;
    }

    componentDidMount() {
        this.initCanvas()
    }
    
    componentDidUpdate() {
        this.initCanvas()
    }
    render() {
        var chartHeight = window.innerHeight-30;
        var chartWidth = window.innerWidth-30;
        var styleText = {
            width: chartWidth+'px', 
            height: chartHeight+'px',
        };
        return (
          <div style={styleText} id="time_graph_canvas">
          </div>
        )
      }
}

export default minute;