评论

HQChart教程 - 如何快速的创建一个K线图

使用HQChart快速创建一个K线图和指标图

HQChart介绍

HQChart(https://github.com/jones2000/HQChart)是根据c++行情客户端软件移植到js平台上的一个项目。由金融图形库和麦语法(分析加语法)脚本执行器组成,所有指标计算都在前端完成,后台api只需要提供基础的行情数据就可以。
支持小程序,h5, 分2套代码完成,因为个个平台对canvas的支持和性能是不一样的,所有独立2套代码,最大的发挥个个平台canvas的性能。
支持手势操作(放大缩小,左右移动,十字光标)
。。。。。其他功能我就不介绍了,有兴趣的可以上github上看,上面有详细的使用教程和设计方案

创建K线图步骤

  1. 在WXML里面增加一个’canvas’元素, 并设置canvas-id, 定义好手势事件,bindtouchstartbindtouchmovebindtouchend
<view class="container">
<canvas class="historychart"  canvas-id="historychart" 
   style="height:{{Height}}px; width:{{Width}}px;" 
   bindtouchstart='historytouchstart' bindtouchmove='historytouchmove' bindtouchend='historytouchend'/>
</view>
  1. 在对应的页面js文件里面 import HQChart组件 (wechathqchart/umychart.wechat.3.0.js)
import { JSCommon } from "../wechathqchart/umychart.wechat.3.0.js";   
  1. 在page类里面创建HQChart组件,设置参数并绑定到’canvas’元素上
Page(
  {
    data:
    {
      Height: 0,
      Width: 0,
       },

    HistoryChart: null,

    HistoryOption:
    {
        Type: '历史K线图', //如果要横屏类型使用:历史K线图横屏
        Windows: //窗口指标
        [
            { Index: 'MA' },
            { Index: 'VOL'},
            { Index: 'RSI' }
                    ],
        //ColorIndex: { Index: '五彩K线-双飞乌鸦' },   //五彩K线
        //TradeIndex: { Index: '交易系统-BIAS' },    //交易系统
        Symbol: "000001.sz",
        IsAutoUpate: true,       //是自动更新数据

        IsShowCorssCursorInfo: true,    //是否显示十字光标的刻度信息
        CorssCursorTouchEnd:true,       //手离开屏幕 隐藏十字光标
        KLine:
        {
            DragMode: 1,                 //拖拽模式 0 禁止拖拽 1 数据拖拽 2 区间选择
            Right: 1,                    //复权 0 不复权 1 前复权 2 后复权
            Period: 0,                   //周期 0 日线 1 周线 2 月线 3 年线
            MaxReqeustDataCount: 1000,   //数据个数
            PageSize: 30,               //一屏显示多少数据
            Info: ["业绩预告", "公告", "互动易", "调研", "大宗交易", "龙虎榜"],       //信息地雷
            //Policy: ["30天地量", "20日均线,上穿62日均线"],  //策略信息
            InfoDrawType:0,
            DrawType: 0,
        },

        //叠加股票
        Overlay:
        [
            //{Symbol:'000001.sz'}
        ],

        KLineTitle: //标题设置
        {
            IsShowName: true,       //显示股票名称
            IsShowSettingInfo: true, //显示周期/复权
         },

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

        Frame:  //子框架设置
        [
            { SplitCount: 3 },
            { SplitCount: 2 },
            { SplitCount: 2 },
         ],

        ExtendChart:    //扩展图形
        [
            { Name: 'KLineTooltip' }
        ],
    },

    onLoad: function ()
     {
       var self = this

      // 获取系统信息
      wx.getSystemInfo({
        success: function (res) 
        {
            console.log(res);
            // 可使用窗口宽度、高度
            //console.log('height=' + res.windowHeight);
            //console.log('width=' + res.windowWidth);
            self.setData({ Height: res.windowHeight, Width: res.windowWidth, Title: { Display:'block'}});
        }
      });

    },

    onReady: function () 
    {
        //创建历史K线类
        var element = new JSCommon.JSCanvasElement();
        element.ID = 'historychart';

        element.Height = this.data.Height;   //高度宽度需要手动绑定!! 微信没有元素类
        element.Width = this.data.Width;
        this.HistoryChart = JSCommon.JSChart.Init(element); //把画布绑定到行情模块中

        this.HistoryChart.SetOption(this.HistoryOption);
    },
    
    //把画图事件绑定到hqchart控件上 
    historytouchstart: function (event) 
    {
      if (this.HistoryChart) this.HistoryChart.OnTouchStart(event);
    },
    historytouchmove: function (event) {
      if (this.HistoryChart) this.HistoryChart.OnTouchMove(event);
    },
    historytouchend: function (event) 
    {
      if (this.HistoryChart) this.HistoryChart.OnTouchEnd(event);
    },
  })

这样1个K线图+指标图就完成了

效果图


HQChart代码地址

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

最后一次编辑于  2019-06-15  
点赞 11
收藏
评论

1 个评论

  • 叔到用时方恨少
    叔到用时方恨少
    2019-06-14

    很明显的错误

    2019-06-14
    赞同
    回复 2
    • 邱一欢
      邱一欢
      2019-06-14

      小程序 canves是异步画图的, h5 canves是同步画图的,

      2019-06-14
      回复
    • 邱一欢
      邱一欢
      2019-06-15

      拼错了 应该是canvas

      2019-06-15
      回复
登录 后发表内容