HQChart使用教程44-uniapp使用条件编译同时支持h5,app,小程序_hqchart插件市场地址-程序员宅基地
技术标签： 量化 股票 uniapp K线图 uni-app HQChart
HQChart使用教程44-uniapp使用条件编译同时支持h5,app,小程序
今天在群里帮一位朋友排查HQChart同时在多端使用的问题。我整理了以下
背景
由于小程序/app很多局限性（无法创建DOM，canvas异步绘图等）导致HQChart开发的时候分成两个版本(小程序版本和H5页面版本）。
使用条件编译我们可以把这2个版本组件同时包含的工程中，并且通过平台判断动态加载对应版本的js.
通过uniapp下载hqchart插件
安装
插件地址: https://ext.dcloud.net.cn/plugin?id=4591
直接通过HBuilder X就可以安装，一般安装的目录在uni_modules\jones-hqchart2下面
使用
改下import路径就可以，其他不变
// #ifdef H5
import HQChart from '@/uni_modules/jones-hqchart2/js_sdk/umychart.uniapp.h5.js'
//HQChart.JSChart.SetDomain("xxxxx.com");
//HQChart.JSComplier.SetDomain("xxxx.com");
// #endif
// #ifndef H5
import {
JSCommon} from '@/uni_modules/jones-hqchart2/js_sdk/umychart.wechat.3.0.js'
import {
JSCommonHQStyle} from '@/uni_modules/jones-hqchart2/js_sdk/umychart.style.wechat.js'
import {
JSCommonComplier} from "@/uni_modules/jones-hqchart2/js_sdk/umychart.complier.wechat.js"
//禁用日志
JSConsole.Complier.Log=()=>{
};
JSConsole.Chart.Log=()=>{
};
// #endif
手动安装插件
在工程里建2个目录，把HQChart的2个版本分别考入对应的目录里。
版本对应关系看以前的教程
HQChart使用教程35 - 如何在uni-app创建K线图(h5)
HQChart使用教程37 - 如何在uni-app创建k线图(app)
template 设置
由于小程序/app是无法动态创建dom，所有只能是先在模板里写死一个画布，在初始化的时候绑定到HQChart中。H5是可以直接内部创建dom，所以只需要传入一个div，HQChart自动会创建画布. 我们使用条件编译在不同的平台使用不同的模板
注意 id的名字尽量使用不一样的，如h5如果使用id=‘kline’ 在app/小程序就使用id=‘kline2’
<!-- #ifdef H5 -->
<div>
<div class='kline' id="kline" ref='kline' v-show="KLine.IsShow"></div>
<div class='minute' id="minute" ref='minute' v-show="Minute.IsShow"></div>
</div>
<!-- #endif -->
<!-- #ifndef H5 -->
<view>
<canvas id="kline2" canvas-id='kline2' class='kline2' v-bind:style="{width: ChartWidth+'px', height: ChartHeight+'px'}" v-show="KLine.IsShow"
@touchstart="KLineTouchStart" @touchmove='KLineTouchMove' @touchend='KLineTouchEnd' ></canvas>
<canvas id="minute2" canvas-id='minute2' class='minute' v-bind:style="{width: ChartWidth+'px', height: ChartHeight+'px'}" v-show="Minute.IsShow"
@touchstart="MinuteTouchStart" @touchmove='MinuteTouchMove' @touchend='MinuteTouchEnd' ></canvas>
</view>
<!-- #endif -->
这样2个模板就同时存在一个页面中了
创建插件设置
为每个平台创建一个创建插件的函数，然后通过一个总的创建函数动态调用对应的创建方法
下面是也创建K线图为例子‘CreateKLineChart_h5()'是h5平台的创建插件方法, 'CreateKLineChart_app()'是app和小程序创建的方法，在"CreateKLineChart()'通过条件编译就可以动态选择使用对应的创建函数
为了代码的可读和可维护性我这边是拆分成2个创建函数，你也可以在CreateKLineChart里面把2个平台的创建都写里面，只过不这样可读性比较差。
CreateKLineChart()
{
// #ifdef H5
this.CreateKLineChart_h5();
// #endif
// #ifndef H5
this.CreateKLineChart_app();
// #endif
},
下面是2个平台对应的创建方法，走势图的创建也是一样
CreateKLineChart_h5() //创建K线图
{
if (g_KLine.JSChart) return;
this.KLine.Option.Symbol=this.Symbol;
let chart=HQChart.JSChart.Init(this.$refs.kline);
this.KLine.Option.NetworkFilter=this.NetworkFilter;
chart.SetOption(this.KLine.Option);
g_KLine.JSChart=chart;
},
CreateKLineChart_app()
{
if (this.KLine.JSChart) return;
let element = new JSCommon.JSCanvasElement();
// #ifdef APP-PLUS
element.IsUniApp=true; //canvas需要指定下 是uniapp的app
// #endif
element.ID = 'kline2';
element.Height = this.ChartHeight; //高度宽度需要手动绑定!!
element.Width = this.ChartWidth;
g_KLine.JSChart = JSCommon.JSChart.Init(element);
this.KLine.Option.NetworkFilter=this.NetworkFilter;
this.KLine.Option.Symbol=this.Symbol;
g_KLine.JSChart.SetOption(this.KLine.Option);
},
HQChart大小调整
由于app/小程序无法获取dom，所以只能是在外部把画布的长宽设置到HQChart中(动态获取只能通过其他的查询元素函数获取，比较麻烦，关键还是异步的,非常搞不懂获取一个元素信息还使用异步，难道以目前的手机配置查询几千几万了dom信息不能在毫秒级处理完)，
H5是可以动态获取dom，就不存在这个文件，改变了外层的div调用HQChart的OnSize()方法就可以动态把div的大小绑定画布上。
OnSize()
{
// #ifdef H5
this.OnSize_h5();
// #endif
},
OnSize_h5()
{
var chartHeight = this.ChartHeight;
var chartWidth = this.ChartWidth;
var kline=this.$refs.kline;
kline.style.width=chartWidth+'px';
kline.style.height=chartHeight+'px';
if (g_KLine.JSChart) g_KLine.JSChart.OnSize();
var minute=this.$refs.minute;
minute.style.width=chartWidth+'px';
minute.style.height=chartHeight+'px';
if (g_Minute.JSChart) g_Minute.JSChart.OnSize();
},
这样多端支持就完成了。点运行，然后喝杯咖啡吧，编译调试真的很慢。
效果图
完整代码
<template>
<div class='divchart' >
<!-- #ifdef H5 -->
<div>
<div class='kline' id="kline" ref='kline' v-show="KLine.IsShow"></div>
<div class='minute' id="minute" ref='minute' v-show="Minute.IsShow"></div>
</div>
<!-- #endif -->
<!-- #ifndef H5 -->
<view>
<canvas id="kline2" canvas-id='kline2' class='kline2' v-bind:style="{width: ChartWidth+'px', height: ChartHeight+'px'}" v-show="KLine.IsShow"
@touchstart="KLineTouchStart" @touchmove='KLineTouchMove' @touchend='KLineTouchEnd' ></canvas>
<canvas id="minute2" canvas-id='minute2' class='minute' v-bind:style="{width: ChartWidth+'px', height: ChartHeight+'px'}" v-show="Minute.IsShow"
@touchstart="MinuteTouchStart" @touchmove='MinuteTouchMove' @touchend='MinuteTouchEnd' ></canvas>
</view>
<!-- #endif -->
<div class="button-sp-area">
<button class="mini-btn" type="default" size="mini" @click="ChangeMinutePeriod(MINUTE_PERIOD_ID.MINUTE_ID)">分时</button>
<button class="mini-btn" type="default" size="mini" @click="ChangeMinutePeriod(MINUTE_PERIOD_ID.MINUTE_5DAY_ID)">5日</button>
<button class="mini-btn" type="default" size="mini" @click="ChangeKLinePeriod(KLINE_PERIOD_ID.KLINE_DAY_ID)">日线</button>
<button class="mini-btn" type="default" size="mini" @click="ChangeKLinePeriod(KLINE_PERIOD_ID.KLINE_WEEK_ID)">周线</button>
<button class="mini-btn" type="default" size="mini" @click="ChangeKLinePeriod(KLINE_PERIOD_ID.KLINE_MINUTE_ID)">1分钟</button>
<button class="mini-btn" type="default" size="mini" @click="ChangeKLinePeriod(KLINE_PERIOD_ID.KLINE_15MINUTE_ID)">15分钟</button>
</div>
</div>
</template>
<script>
// #ifdef H5
import HQChart from '../../umychart_uniapp_h5/umychart.uniapp.h5.js'
// #endif
// #ifndef H5
import {
JSCommon} from '../../umychart.uniapp/umychart.wechat.3.0.js'
// #endif
function DefaultData() {
}
DefaultData.GetKLineOption = function ()
{
let data =
{
Type: '历史K线图',
Windows: //窗口指标
[
{
Index:"MA",Modify: false, Change: false},
{
Index:"VOL",Modify: false, Change: false}
],
IsCorssOnlyDrawKLine:true,
CorssCursorTouchEnd:true,
Border: //边框
{
Left: 1,
Right: 1, //右边间距
Top: 25,
Bottom: 25,
},
KLine:
{
Right:1, //复权 0 不复权 1 前复权 2 后复权
Period:0, //周期: 0 日线 1 周线 2 月线 3 年线
PageSize:30,
IsShowTooltip:false
},
ExtendChart:
[
{
Name:'KLineTooltip' }, //开启手机端tooltip
],
Frame: //子框架设置
[
{
SplitCount:3},
{
SplitCount:2},
{
SplitCount:3},
],
};
return data;
}
DefaultData.GetMinuteOption=function()
{
var option=
{
Type:'分钟走势图', //创建图形类型
Windows: //窗口指标
[
],
IsAutoUpdate:true, //是自动更新数据
DayCount:1, //1 最新交易日数据 >1 多日走势图
IsShowRightMenu:false, //是否显示右键菜单
CorssCursorTouchEnd:true,
MinuteLine:
{
//IsDrawAreaPrice:false, //是否画价格面积图
},
Border: //边框
{
Left:1, //左边间距
Right:1, //右边间距
Top:20,
Bottom:20
},
Frame: //子框架设置
[
{
SplitCount:3},
{
SplitCount:2},
{
SplitCount:3},
],
ExtendChart: //扩展图形
[
{
Name:'MinuteTooltip' } //手机端tooltip
],
};
return option;
}
//周期枚举
var KLINE_PERIOD_ID=
{
KLINE_DAY_ID:0,
KLINE_WEEK_ID:1,
KLINE_MONTH_ID:2,
KLINE_YEAR_ID:3,
KLINE_MINUTE_ID:4,
KLINE_5MINUTE_ID:5,
KLINE_15MINUTE_ID:6,
KLINE_30MINUTE_ID:7,
KLINE_60MINUTE_ID:8
}
//周期枚举
var MINUTE_PERIOD_ID=
{
MINUTE_ID:1,
MINUTE_2DAY_ID:2,
MINUTE_3DAY_ID:3,
MINUTE_4DAY_ID:4,
MINUTE_5DAY_ID:5,
}
var g_KLine={
JSChart:null };
var g_Minute={
JSChart:null };
export default
{
data()
{
let data=
{
Symbol:'600000.sh',
ChartWidth:300,
ChartHeight:500,
KLine:
{
Option:DefaultData.GetKLineOption(),
IsShow:true,
},
Minute:
{
Option:DefaultData.GetMinuteOption(),
IsShow:false,
},
MINUTE_PERIOD_ID:MINUTE_PERIOD_ID,
KLINE_PERIOD_ID:KLINE_PERIOD_ID,
};
return data;
},
onLoad()
{
},
onReady()
{
this.OnSize();
this.CreateKLineChart();
},
methods:
{
OnSize()
{
// #ifdef H5
this.OnSize_h5();
// #endif
},
OnSize_h5()
{
var chartHeight = this.ChartHeight;
var chartWidth = this.ChartWidth;
var kline=this.$refs.kline;
kline.style.width=chartWidth+'px';
kline.style.height=chartHeight+'px';
if (g_KLine.JSChart) g_KLine.JSChart.OnSize();
var minute=this.$refs.minute;
minute.style.width=chartWidth+'px';
minute.style.height=chartHeight+'px';
if (g_Minute.JSChart) g_Minute.JSChart.OnSize();
},
CreateKLineChart_h5() //创建K线图
{
if (g_KLine.JSChart) return;
this.KLine.Option.Symbol=this.Symbol;
let chart=HQChart.JSChart.Init(this.$refs.kline);
this.KLine.Option.NetworkFilter=this.NetworkFilter;
chart.SetOption(this.KLine.Option);
g_KLine.JSChart=chart;
},
CreateKLineChart_app()
{
if (this.KLine.JSChart) return;
let element = new JSCommon.JSCanvasElement();
// #ifdef APP-PLUS
element.IsUniApp=true; //canvas需要指定下 是uniapp的app
// #endif
element.ID = 'kline2';
element.Height = this.ChartHeight; //高度宽度需要手动绑定!!
element.Width = this.ChartWidth;
g_KLine.JSChart = JSCommon.JSChart.Init(element);
this.KLine.Option.NetworkFilter=this.NetworkFilter;
this.KLine.Option.Symbol=this.Symbol;
g_KLine.JSChart.SetOption(this.KLine.Option);
},
CreateKLineChart()
{
// #ifdef H5
this.CreateKLineChart_h5();
// #endif
// #ifndef H5
this.CreateKLineChart_app();
// #endif
},
//K线周期切换
ChangeKLinePeriod:function(period)
{
this.Minute.IsShow=false;
this.KLine.IsShow=true;
if (!g_KLine.JSChart) //不存在创建
{
this.KLine.Option.Period=period;
this.CreateKLineChart_h5();
}
else
{
g_KLine.JSChart.ChangePeriod(period);
}
},
CreateMinuteChart_h5() //创建日线图
{
if (g_Minute.JSChart) return;
this.Minute.Option.Symbol=this.Symbol;
let chart=HQChart.JSChart.Init(this.$refs.minute);
this.Minute.Option.NetworkFilter=this.NetworkFilter;
chart.SetOption(this.Minute.Option);
g_Minute.JSChart=chart;
},
CreateMinuteChart_app()
{
if (g_Minute.JSChart) return;
var element = new JSCommon.JSCanvasElement();
// #ifdef APP-PLUS
element.IsUniApp=true; //canvas需要指定下 是uniapp的app
// #endif
element.ID = 'minute2';
element.Height = this.ChartHeight; //高度宽度需要手动绑定!!
element.Width = this.ChartWidth;
g_Minute.JSChart = JSCommon.JSChart.Init(element);
this.Minute.Option.NetworkFilter=this.NetworkFilter;
this.Minute.Option.Symbol=this.Symbol;
g_Minute.JSChart.SetOption(this.Minute.Option);
},
CreateMinuteChart()
{
// #ifdef H5
this.CreateMinuteChart_h5();
// #endif
// #ifndef H5
this.CreateMinuteChart_app();
// #endif
},
//走势图多日切换
ChangeMinutePeriod:function(period)
{
this.Minute.IsShow=true;
this.KLine.IsShow=false;
if (!g_Minute.JSChart) //不存在创建
{
this.Minute.Option.DayCount=period;
this.CreateMinuteChart();
}
else
{
g_Minute.JSChart.ChangeDayCount(period);
}
},
NetworkFilter:function(data, callback)
{
console.log(`[HQChart:NetworkFilter] Name=${
data.Name} Explain=${
data.Explain}` );
},
///
//手势事件 app/小程序才有
//KLine事件
KLineTouchStart: function (event)
{
if (g_KLine.JSChart) g_KLine.JSChart.OnTouchStart(event);
},
KLineTouchMove: function (event)
{
if (g_KLine.JSChart) g_KLine.JSChart.OnTouchMove(event);
},
KLineTouchEnd: function (event)
{
if (g_KLine.JSChart) g_KLine.JSChart.OnTouchEnd(event);
},
//走势图事件
MinuteTouchStart: function (event)
{
if (g_Minute.JSChart) g_Minute.JSChart.OnTouchStart(event);
},
MinuteTouchMove: function (event)
{
if (g_Minute.JSChart) g_Minute.JSChart.OnTouchMove(event);
},
MinuteTouchEnd: function (event)
{
if (g_Minute.JSChart) g_Minute.JSChart.OnTouchEnd(event);
},
}
}
</script>
<style>
</style>
如果还有问题可以加交流QQ群: 950092318
HQChart代码地址
地址：github.com/jones2000/HQChart
智能推荐
python 描述符_Python黑魔法之描述符-程序员宅基地
文章浏览阅读113次。引言Descriptors(描述符)是Python语言中一个深奥但很重要的一个黑魔法，它被广泛应用于Python语言的内核，熟练掌握描述符将会为Python程序员的工具箱添加一个额外的技巧。本文我将讲述描述符的定义以及一些常见的场景，并且在文末会补充一下__getattr__，__getattribute__,__getitem__这三个同样涉及到属性访问的魔术方法。描述符的定义descr__g..._python revealaccess
jenkins自动化部署及三种构建部署方式_jenkins自动和手动部署-程序员宅基地
文章浏览阅读504次。jenkins自动化部署及三种构建部署方式jenkins是基于java开发的一种持续集成工具，用于监控持续重复的工作，功能包括。1、持续的软件版本发布/测试2、监控外部调用执行项目Jenkins其实很早之前就有了，最近火起来的原因是，大家都在关注devops，关注如何来做持续集成，持续交付，如何来做CI/CD。Jenkins作为持续集成的工具，他其实只是一个平台或者是一个大的框架，它的工作完全就是依靠插件，也就是说你想使用什么功能，你就找到什么样的插件。1.2.jenkins好处1、我在工作中部_jenkins自动和手动部署
GMSK调制解调误码率matlab仿真_gmsk码间干扰-程序员宅基地
文章浏览阅读1.6k次，点赞25次，收藏35次。GMSK（高斯最小频移键控）是一种连续相位的频移键控（CPFSK）调制方法，它在数字通信中得到了广泛应用，特别是在移动通信系统中。GMSK通过限制频率偏差的累积来减少带外辐射，并通过使用高斯滤波器对基带信号进行预调制来平滑相位路径。_gmsk码间干扰
Reader类和Writer类_sreader_writer_uoml-程序员宅基地
文章浏览阅读3k次。从键盘读入用户的输入，并显示在屏幕上1. 效果图2. Java代码package com.example.demo.file;import java.io.InputStreamReader;import java.io.OutputStreamWriter;/** * @Description Reader类和Writer类 * @author 大都督 * @date 2..._sreader_writer_uoml
python编码问题之encode、decode、codecs模块_python中encode在什么模块-程序员宅基地
文章浏览阅读2.1k次。原文链接先说说编解码问题编码转换时，通常需要以unicode作为中间编码，即先将其他编码的字符串解码（decode）成unicode，再从unicode编码（encode）成另一种编码。 Eg：str1.decode('gb2312') #将gb2312编码的字符串转换成unicode编码str2.encode('gb2312') #将unicode编码..._python中encode在什么模块
Java数据流-程序员宅基地
文章浏览阅读949次，点赞21次，收藏15次。本文介绍了Java中的数据输入流（DataInputStream）和数据输出流（DataOutputStream）的使用方法。
随便推点
ORACLE常用傻瓜问题1000问-程序员宅基地
文章浏览阅读678次。1. oracle安装完成后的初始口令? internal/oracle sys/change_on_install system/manager scott/tiger sysman/oem_temp 2. orACLE9IAS WEB CACHE的初始默认用户和密码？ administrator/administrator 3. oracle 8.0.5怎么创建数据库?
iOS UISearchBar改变搜索框的颜色_ios searchbar 设置搜索狂颜色-程序员宅基地
文章浏览阅读2.1k次。[objc] view plain copy //搜索框 - (UISearchBar *)searchBar{ if (_searchBar == nil) { _searchBar = [[UISearchBar alloc]initWithFrame:CGRectMake(0, 27, KScreenWidth_ios searchbar 设置搜索狂颜色
ADADELTA AN ADAPTIVE LEARNING RATE METHOD_adadelta一种自适应学习率方法-程序员宅基地
文章浏览阅读527次。ADADELTA: AN ADAPTIVE LEARNING RATE METHOD参考：[自适应学习率调整AdaDelta](https://www.cnblogs.com/neopenx/p/4768388.html)我们提出了一种新的梯度下降的逐维学习率方法ADADELTA。该方法仅使用一阶信息随时间动态地适应，并且除了一般的随机梯度下降外，具有最小的计算开销。该方法不需要人工调整学习速率，对噪声梯度信息、不同模型结构选择、不同数据模式和超参数选择具有鲁棒性。与其他方法相比，我们在分布式集群环境下_adadelta一种自适应学习率方法
从零开始一个微信小程序版知乎_微信小程序开发 知乎-程序员宅基地
文章浏览阅读1.5k次。以前工作没直接进行过小程序的开发，最近闲了下来就赶紧学习一下。因为从零开始，所以没有使用任何框架及UI库，记录一下本次开发中踩过的坑吧~展示效果(界面样式设计与交互来自iOS 4.8.0版本知乎App)：动态效果请移步到GitHub查看。一、开始前的准备申请账号：根据小程序注册文档，填写信息和提交相应的资料，就可以拥有自己的小程序帐号。开发工具：微信开发者工具数据来源：Easy M..._微信小程序开发 知乎
centos uwsgi配置_在CentOS 7下安装uwsgi_uwsgi离线安装centos-程序员宅基地
文章浏览阅读153次。https://blog.csdn.net/weixin_35886269/article/details/112941217_uwsgi离线安装centos
关于使用CryPtopp库进行RSA签名与验签的一些说明_cryptopp 签名-程序员宅基地
文章浏览阅读449次，点赞9次，收藏7次。这个变量与验签过程中的SignatureVerificationFilter::PUT_MESSAGE这个宏是对应的，SignatureVerificationFilter::PUT_MESSAGE，如果在签名过程中putMessage设置为true，则在验签过程中需要添加SignatureVerificationFilter::PUT_MESSAGE。项目中使用到了CryPtopp库进行RSA签名与验签，但是在使用过程中反复提示无效的数字签名。否则就会出现文章开头出现的数字签名无效。_cryptopp 签名