HQChart钉钉小程序教程1-创建K线图

钉钉小程序HQChart效果图

教程使用钉钉企业内部应用小程序为例子

步骤

1. 创建画布

在.axml 文件里面添加一个canvas元素

<view>
  <canvas 
      id="hqchart"
      width={{Width*PixelRatio}}
      height={{Height*PixelRatio}}
      style="height:{{Height}}px; width:{{Width}}px;" 
      class="canvas"
      onTouchStart="OnTouchStart"
      onTouchMove="OnTouchMove"
      onTouchEnd="OnTouchEnd"
      disable-scroll=true
    />
...........
</view>

注意这里的有两个大小宽度和高度， 这个是高清屏的设置，具体看官网解释下图

2. 添加HQChart插件文件

下载插件 https://github.com/jones2000/HQChart/tree/master/wechathqchart
把这个目录里的文件都添加到你的小程序工程里面
如下图

3. import插件

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

4. 初始化HQChart插件

创建一个JSCanvasElement画布类，设置好画布大小和钉钉版本， 然后创建HAChart实例，这样图形就可以显示了。

CreateKLineChart()
{
    var element = new JSCommon.JSCanvasElement();
    element.ID = 'hqchart';
    element.Height = this.data.Height;   //高度宽度需要手动绑定!!
    element.Width = this.data.Width;
    element.PixelRatio=this.PixelRatio;
    element.IsDingTalk=true;      //设置为钉钉版本

    JSCommon.JSNetwork.IsDingTalk=true;  //网路接口设置为钉钉版本

    this.Chart = JSCommon.JSChart.Init(element);  //创建HQChart实例
    var option=DefaultData.GetKLineOption();
    option.Symbol=this.data.Symbol;
    option.KLine.Period=this.data.Period;
    this.Chart.SetOption(option);
    this.Chart.ChartName="KLine";
},

5. 绑定手势事件

把onTouchStart绑定到 插件OnTouchStart事件上
把onTouchMove绑定到 插件OnTouchMove事件上
把onTouchEnd绑定到 插件OnTouchEnd事件上

  <canvas 
      id="hqchart"
      width={{Width*PixelRatio}}
      height={{Height*PixelRatio}}
      style="height:{{Height}}px; width:{{Width}}px;" 
      class="canvas"
      onTouchStart="OnTouchStart"
      onTouchMove="OnTouchMove"
      onTouchEnd="OnTouchEnd"
      disable-scroll=true
    />

//手势事件
OnTouchStart(event) 
 {
   if (this.Chart) this.Chart.OnTouchStart(event);
 },

 OnTouchMove(event) 
 {
   if (this.Chart) this.Chart.OnTouchMove(event);
 },

 OnTouchEnd(event) 
 {
   if (this.Chart) this.Chart.OnTouchEnd(event);
 },

QQ群: 950092318

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

HQChart插件源码地址

https://github.com/jones2000/HQChart

例子完整代码

index.acss

.canvas {
  width: 305px;
  height: 305px;
  background-color: rgb(255,255,255)
}

index.axml

<view>
  <canvas 
      id="hqchart"
      width={{Width*PixelRatio}}
      height={{Height*PixelRatio}}
      style="height:{{Height}}px; width:{{Width}}px;" 
      class="canvas"
      onTouchStart="OnTouchStart"
      onTouchMove="OnTouchMove"
      onTouchEnd="OnTouchEnd"
      disable-scroll=true
    />

    <view class="buttonlist" style="top:{{Height}}px">
        <button type="default" size='mini' onTap='OnChangeMinute' >分时</button>
        <button type="default" size='mini' onTap='OnChangePeriod' data-id='0'>日线</button>
        <button type="default" size='mini' onTap='OnChangePeriod' data-id='1'>周线</button>
        <button type="default" size='mini' onTap='OnChangePeriod' data-id='4'>1分钟</button>
        <button type="default" size='mini' onTap='OnChangePeriod' data-id='5'>5分钟</button>
    </view>
</view>

index.js

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

function DefaultData() { }

DefaultData.GetKLineOption = function () 
{
    //K线配置信息
    var option =
    {
        Type: '历史K线图',   //创建图形类型

        Windows: //窗口指标
            [
                { Index: "MA", Modify: false, Change: false },
                { Index: "VOL", Modify: false, Change: false, Close: false },
            ],

        IsAutoUpdate: true,              //是自动更新数据
        AutoUpdateFrequency: 20000,       //数据更新频率
        IsShowRightMenu: false,          //右键菜单
        Symbol:"600000.sh",

        //IsApiPeriod:true,             //复权,周期都使用后台数据

        CorssCursorTouchEnd: true,
        //StepPixel:5,        //移动一个K线需要的手势移动的像素(默认4)
        //ZoomStepPixel:8,    //缩放一次,2个手指需要移动的间距像素(默认5)

        IsFullDraw: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: 30,                 //一屏显示多少数据
            IsShowTooltip: false,          //是否显示 div K线提示信息 (手机端要填false)
            DrawType: 0,                   //K线类型 0=实心K线柱子 1=收盘价线 2=美国线 3=空心K线柱子 4=收盘价面积图
            RightSpaceCount: 1
        },

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

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

        Frame:  //子框架设置
            [
                {
                    SplitCount: 5, IsShowLeftText: false, Height: 8, SplitType: 1,
                    Custom: [{ Type: 0, Position: 'right' }]
                },

                { SplitCount: 2, IsShowLeftText: false, Height: 2 },
            ],

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

    return option;
}


//面积图
DefaultData.GetKLineAreaOption = function () 
{
    //K线配置信息
    var option =
    {
        Type: '历史K线图',   //创建图形类型

        Windows: //窗口指标
        [
            { Index: "EMPTY"},
        ],

        IsAutoUpdate: true,              //是自动更新数据
        AutoUpdateFrequency: 20000,       //数据更新频率
        IsShowRightMenu: false,          //右键菜单
        Symbol:"600000.sh",

        //IsApiPeriod:true,             //复权,周期都使用后台数据

        CorssCursorTouchEnd: true,
        //StepPixel:5,        //移动一个K线需要的手势移动的像素(默认4)
        //ZoomStepPixel:8,    //缩放一次,2个手指需要移动的间距像素(默认5)

        IsFullDraw: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: 100,                 //一屏显示多少数据
            IsShowTooltip: false,          //是否显示 div K线提示信息 (手机端要填false)
            DrawType: 4,                   //K线类型 0=实心K线柱子 1=收盘价线 2=美国线 3=空心K线柱子 4=收盘价面积图
            RightSpaceCount: 1
        },

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

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

        Frame:  //子框架设置
            [
                {
                    SplitCount: 5, IsShowLeftText: false, Height: 8, SplitType: 1,
                    Custom: [{ Type: 0, Position: 'right' }]
                },

                { SplitCount: 2, IsShowLeftText: false, Height: 2 },
            ],

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

    return option;
}

//走势图
DefaultData.GetMinuteOption = function () 
{
    //K线配置信息
    var option =
    {
        Type: '分钟走势图',
        //Type: '分钟走势图横屏',
        Symbol: "600000.sh",
        IsAutoUpate: true,       //是自动更新数据

        //IsShowCorssCursorInfo: false,    //是否显示十字光标的刻度信息
        CorssCursorTouchEnd: true,       //手离开屏幕 隐藏十字光标
        IsFullDraw:true,                //不是使用缓存每次都重绘
        DayCount:1,
        Windows: //窗口指标
        [
            { Index: "KDJ" }
        ],

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

        Frame:  //子框架设置,刻度小数位数设置
        [
            { SplitCount: 5, StringFormat: 1 },
            { SplitCount: 2, StringFormat: 1 },
            { SplitCount: 2, StringFormat: 1 },
            { SplitCount: 2, StringFormat: 1 }
        ],

        //Language:'CN',
        MinuteLine:
        {
            //IsShowAveragePrice:false,
        },

        MinuteTitle: //标题设置
        {
            IsShow:true,
            IsShowName: true,       //不显示股票名称
            TextSpace:5,
        },

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

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

    return option;
}

Page({

    Chart:null,

    data:
    {
        Height: 600,
        Width: 600,
        PixelRatio:1,

        Symbol:"000001.sz",
        Period:0,
    },

    ClearHQChart()
    {
        if (this.Chart)
        {
            this.Chart.ChartDestory();
            this.Chart=null;
        }
    },

    CreateKLineChart()
    {
        var element = new JSCommon.JSCanvasElement();
        element.ID = 'hqchart';
        element.Height = this.data.Height;   //高度宽度需要手动绑定!! 微信没有元素类
        element.Width = this.data.Width;
        element.PixelRatio=this.PixelRatio;
        element.IsDingTalk=true;

        JSCommon.JSNetwork.IsDingTalk=true;

        this.Chart = JSCommon.JSChart.Init(element);
        var option=DefaultData.GetKLineOption();
        option.Symbol=this.data.Symbol;
        option.KLine.Period=this.data.Period;
        this.Chart.SetOption(option);
        this.Chart.ChartName="KLine";
    },

    CreateKLineAreaChart()
    {
        var element = new JSCommon.JSCanvasElement();
        element.ID = 'hqchart';
        element.Height = this.data.Height;   //高度宽度需要手动绑定!! 微信没有元素类
        element.Width = this.data.Width;
        element.PixelRatio=this.PixelRatio;
        element.IsDingTalk=true;

        JSCommon.JSNetwork.IsDingTalk=true;

        this.Chart = JSCommon.JSChart.Init(element);
        var option=DefaultData.GetKLineAreaOption();
        option.Symbol=this.data.Symbol;
        option.KLine.Period=this.data.Period;
        this.Chart.SetOption(option);
        this.Chart.ChartName="KLineArea";
    },

    CreateMinuteChart()
    {
        var element = new JSCommon.JSCanvasElement();
        element.ID = 'hqchart';
        element.Height = this.data.Height;   //高度宽度需要手动绑定!! 微信没有元素类
        element.Width = this.data.Width;
        element.PixelRatio=this.PixelRatio;
        element.IsDingTalk=true;

        JSCommon.JSNetwork.IsDingTalk=true;

        this.Chart = JSCommon.JSChart.Init(element);
        var option=DefaultData.GetMinuteOption();
        option.Symbol=this.data.Symbol;
        this.Chart.SetOption(option);
        this.Chart.ChartName="Minute";
    },

    OnChangeMinute()
    {
        if (!this.Chart || this.Chart.ChartName!='Minute')
        {
            if (this.Chart)
            {
                this.ClearHQChart();
                this.CreateMinuteChart();
            }
        }
    },

    OnChangePeriod(event)
    {
        var period=parseInt(event.target.dataset.id);
        this.Period=period;
        if (!this.Chart || this.Chart.ChartName!='KLine')
        {
            if (this.Chart)
            {
                this.ClearHQChart();
                this.CreateKLineChart();
            }
        }
        else
        {
            this.Chart.ChangePeriod(period);
        }
    },

    //K线图事件
    OnTouchStart(event) 
    {
      if (this.Chart) this.Chart.OnTouchStart(event);
    },

    OnTouchMove(event) 
    {
      if (this.Chart) this.Chart.OnTouchMove(event);
    },

    OnTouchEnd(event) 
    {
      if (this.Chart) this.Chart.OnTouchEnd(event);
    },

    onLoad(query) 
    {
        var systemInfo=dd.getSystemInfoSync();
        console.log(`height=${systemInfo.windowHeight}, width=${systemInfo.windowWidth}, pixelRatio=${systemInfo.pixelRatio}`);

        this.setData({"Height":systemInfo.windowHeight-50, "Width":systemInfo.windowWidth, "PixelRatio":systemInfo.pixelRatio});
    },


    onReady() 
    {
        this.CreateKLineChart();
    },
    onShow() {
        // 页面显示
    },
    onHide() {
        // 页面隐藏
    },
    onUnload() {
        // 页面被关闭
    },
    onTitleClick() {
        // 标题被点击
    },
    onPullDownRefresh() {
        // 页面被下拉
    },
    onReachBottom() {
        // 页面被拉到底部
    },
    onShareAppMessage() {
        // 返回自定义分享信息
        return {
            title: 'My App',
            desc: 'My App description',
            path: 'pages/index/index',
        };
    },
});