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',
};
},
});