HQChart介绍

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

创建K线图步骤

1. 在WXML里面增加一个’canvas’元素， 并设置canvas-id, 定义好手势事件，bindtouchstart，bindtouchmove，bindtouchend

<view class="container">
<canvas class="historychart"  canvas-id="historychart" 
   style="height:{{Height}}px; width:{{Width}}px;" 
   bindtouchstart='historytouchstart' bindtouchmove='historytouchmove' bindtouchend='historytouchend'/>
</view>

2. 在对应的页面js文件里面 import HQChart组件 （wechathqchart/umychart.wechat.3.0.js）

import { JSCommon } from "../wechathqchart/umychart.wechat.3.0.js";   

3. 在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