HQChart使用教程13-5分钟完成一个小程序K线图

效果图

下载HQChart组件

https://github.com/jones2000/HQChart
把 \trunk\wechathqchart 目录拷贝到小程序项目的目录里面。

配置 WXML

新建一个小程序页面，
在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>

配置页面js文件

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

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

Page(
  {
    data:
    {
      Height: 0,
      Width: 0,
       },

    HistoryChart: null,

    HistoryOption:
    {
        Type: '历史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线图就完成了。

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

HQChart代码地址

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