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