技术标签: kline hqchart K线图 HQChart
听说Vue3.0发布了, 群里的很多小伙伴们都开始询问HQChart是否可以在Vue3.0里面使用。HQChart是用js裸写开发的, 应该是可以的。 只要根据vue3.0的规则把一个div绑定到hqchart实例上就可以了。我想着这个很简单,就把任务给了页面开发小组, 让他们做一个demo. 最后任务失败了, 没有搞定。只能抽空自己做了,哎~~~。 花了3小时,看了vue3.0的文档,直接就吐血,对一个常年使用c++开发的人, 面对对象开发是必不可少的。 vue.3.0里面直接就去掉了this,哎 …
最原始的方法通过document.getElementById()来获取, 在vue2.0通过$refs来获取, vue3.0这个没了, 需要用ref()来生成一个dom对应的变量, 然后把这个变量暴露出去。vue就会自动给你绑定了。 很绕口吧, 我也是看了半天才明白的。下面就是以app这个div绑定到变量DivApp上的例子
<template>
<div id="app" ref='DivApp' style="height:100%; width:100%">
......
</div>
</template>
export default {
name: 'HQChartDemo',
setup(/*props, context*/)
{
.......
var DivApp=ref(null); //创建一个变量
.......
return {
.....
//DOM元素
DivApp, //把变量暴露出去 ref='DivApp' 就可以自动绑定了
.......
};
}
}
vue2.0里面的mounted, 在vue3.0就没有了, 需要使用onMounted() 代替, 在setup()里面定制这个函数.
setup(/*props, context*/)
{
..........
onMounted(()=>
{
console.log(`[HQChartDemo::mounted]`);
window.onresize = ()=>{
OnSize() }
OnSize();
CreateKLineChart(0);
});
........
}
vue2.0里面的methods也没有了,在vue3.0直接把函数定义在setup()里面就可以, 如果要给外部就,就返回,内部就不用返回了
setup(/*props, context*/)
{
const ChangeSymbol=function(symbol) //切换股票
{
HQChartData.Symbol=symbol;
HQChartData.Chart.ChangeSymbol(HQChartData.Symbol);
};
//内部函数不暴露出去
const IsKLineChart=function()
{
if (!HQChartData.Chart || !HQChartData.Chart.JSChartContainer) return;
return HQChartData.Chart.JSChartContainer.ClassName=="KLineChartContainer";
};
return {
......
//导出函数
........
ChangeSymbol, //切换代码,作为接口暴露出去给外部用
};
}
在vue2.0里面都是放在data()里面的, vue3.0放在setup() 里面, 如果只是内部用可以不返回。
hqchart需要在图形创建以后保存一个实例, 后续k线图的操作都是在这个实例上的操作。所以需要一个内部变量(Chart)来保存
setup(/*props, context*/)
{
const HQChartData=
{
Symbol:'600000.sh', //代码
Chart:null, //图形控件
};
......
}
由于没有this这个东西了, 所有函数直接用HQChartData.Chart 就可以访问了。
有了这些知识以后,就可以使用vue3.0来创建hqchart了。
vue3.0我不懂, 有说的不对的地方,请指正。另外还有小伙伴问ts创建hqchart, 这个ts我真不懂, 也没用过, 等以后我空了, 再帮你们看吧, 如果有谁用ts创建过hqchart也欢迎分享出来。
<template>
<div id="app" ref='DivApp' style="height:100%; width:100%; left:0px">
<div>
<div id="kline" ref='DivKLine' class='hqchart' style="height:400px; width:500px; position: relative;"></div>
</div>
<div ref='DivButtons'>
<div>
<button @click="ChangePeriod(0)">日线</button>
<button @click="ChangePeriod(4)">1分钟</button>
<button @click="ChangePeriod(6)">15分钟</button>
<button @click="ChangeMinute()">分时</button>
<button @click="ChangeSymbol('000001.sz')">平安银行</button>
<button @click="ChangeSymbol('600999.sh')">招商银行</button>
</div>
</div>
</div>
</template>
<script>
import {
onMounted, onUnmounted, ref } from 'vue'
import HQChart from 'hqchart'
import 'hqchart/src/jscommon/umychart.resource/css/tools.css'
import 'hqchart/src/jscommon/umychart.resource/font/iconfont.css'
import HQData from "hqchart/lib/umychart.NetworkFilterTest.vue"
function DefaultData() {
}
DefaultData.GetKLineOption=function()
{
//K线配置信息
var option=
{
Type:'历史K线图', //创建图形类型
Windows: //窗口指标
[
{
Index:"MA", Modify:true,Change:true },
{
Index:"VOL", Modify:true,Change:true, Close:true },
],
IsAutoUpdate:true, //是自动更新数据
AutoUpdateFrequency:3000, //数据更新频率
IsShowRightMenu:false, //右键菜单
ToolbarButtonStyle:1,
IsApiPeriod:true, //复权,周期都使用后台数据
//CorssCursorTouchEnd:true,
//StepPixel:5, //移动一个K线需要的手势移动的像素(默认4)
//ZoomStepPixel:8, //缩放一次,2个手指需要移动的间距像素(默认5)
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:true, //是否显示 div K线提示信息 (手机端要填false)
DrawType:0, //K线类型 0=实心K线柱子 1=收盘价线 2=美国线 3=空心K线柱子 4=收盘价面积图
RightSpaceCount:1
},
KLineTitle: //标题设置
{
IsShowName:true, //不显示股票名称
IsShowSettingInfo:true //不显示周期/复权
},
Border: //边框
{
Left:1, //左边间距
Right:80, //右边间距
Bottom:25, //底部间距
Top:25 //顶部间距
},
Frame: //子框架设置
[
{
SplitCount:3,IsShowLeftText:false, Height:8,
Custom: [ {
Type:0, Position:'right' } ]
},
{
SplitCount:2,IsShowLeftText:false, Height:2 },
],
ExtendChart: //扩展图形
[
//{Name:'KLineTooltip' } //手机端tooltip
],
};
return option;
}
DefaultData.GetMinuteOption=function()
{
//分时图配置信息
var option=
{
Type:'分钟走势图', //创建图形类型
//Type:'分钟走势图横屏',
Windows: //窗口指标
[
//{Index:"MACD", Modify:true, Change:false, Close:false }
//{Index:"涨跌趋势", Modify:false,Change:false},
],
Symbol:'000001.sz',
IsAutoUpdate:true, //是自动更新数据
AutoUpdateFrequency:1000, //数据更新频率
DayCount:1, //1 最新交易日数据 >1 多日走势图
IsShowRightMenu:true, //是否显示右键菜单
//CorssCursorInfo:{ Left:2, Right:2, Bottom:1,RightTextFormat:1 },
MinuteLine:
{
IsDrawAreaPrice:true, //是否画价格面积图
IsShowAveragePrice:true, //不显示均线
},
MinuteTitle:
{
IsShowTime:true,
IsShowName:true,
IsShowDate:false,
},
//EnableBorderDrag:false,
Border: //边框
{
Left:1, //左边间距
Right:1, //右边间距
Top:25,
Bottom:25
},
Frame: //子框架设置
[
{
SplitCount:5,
Custom:
[
{
Type:1,
Position:'left', LineType:0,
Data:
[
{
Value:15.8,
Color:'rgb(0,34,255)', TextColor:'rgb(255,255,255)',
},
]
}
]
},
{
SplitCount:3 },
],
ExtendChart: //扩展图形
[
//{Name:'MinuteTooltip' } //手机端tooltip
]
};
return option;
}
export default {
name: 'HQChartDemo',
setup(/*props, context*/)
{
const HQChartData=
{
Symbol:'600000.sh', //代码
Chart:null, //图形控件
};
var DivApp=ref(null);
var DivKLine=ref(null);
var DivButtons=ref(null);
onMounted(()=>
{
console.log(`[HQChartDemo::mounted]`);
window.onresize = ()=>{
OnSize() }
OnSize(); //子组件的mounted在父组件的mounted之前执行了
CreateKLineChart(0);
});
onUnmounted(()=>
{
});
///
//内部接口
const OnSize=function()
{
var app=DivApp.value;
console.log(app.value);
//获取屏幕大小 动态设置K线的div大小
var height=window.innerHeight;
var width=window.innerWidth;
console.log(`[HQChartDemo::OnSize] width=${
width} height=${
height}`);
var kline=DivKLine.value;
kline.style.width=width+'px';
kline.style.height=(height-60)+'px';
if (HQChartData.Chart) HQChartData.Chart.OnSize();
};
const ClearChart=function()
{
if (HQChartData.Chart)
{
HQChartData.Chart.ChartDestroy();
HQChartData.Chart=null;
}
var divKLine=document.getElementById('kline');
while (divKLine.hasChildNodes())
{
divKLine.removeChild(divKLine.lastChild);
}
};
//创建走势图
const CreateKLineChart=function(period)
{
ClearChart();
var option=DefaultData.GetKLineOption();
option.Symbol=HQChartData.Symbol;
option.Period=period;
var divKLine=document.getElementById('kline');
var chart=HQChart.Chart.JSChart.Init(divKLine);
option.NetworkFilter=(data, callback)=>{
KLineNetworkFilter(data, callback); }
chart.SetOption(option);
HQChartData.Chart=chart;
};
const ChangePeriod=function(period) //K线图切换周期
{
if (IsKLineChart())
HQChartData.Chart.ChangePeriod(period);
else
CreateKLineChart(period);
};
const ChangeMinute=function() //分时图
{
if(IsMinuteChart())
return;
else
{
CreateMinuteChart();
}
};
const ChangeSymbol=function(symbol) //切换股票
{
HQChartData.Symbol=symbol;
HQChartData.Chart.ChangeSymbol(HQChartData.Symbol);
};
const IsKLineChart=function()
{
if (!HQChartData.Chart || !HQChartData.Chart.JSChartContainer) return;
return HQChartData.Chart.JSChartContainer.ClassName=="KLineChartContainer";
};
const IsMinuteChart=function()
{
if (!HQChartData.Chart || !HQChartData.Chart.JSChartContainer) return;
return HQChartData.Chart.JSChartContainer.ClassName=="MinuteChartContainer";
};
const KLineNetworkFilter=function(data, callback)
{
HQData.HQData.NetworkFilter(data, callback);
}
const MinuteNetworkFilter=function(data, callback)
{
HQData.HQData.NetworkFilter(data, callback);
}
//创建分时图
const CreateMinuteChart=function()
{
ClearChart();
var option=DefaultData.GetMinuteOption();
option.Symbol=HQChartData.Symbol;
var divKLine=document.getElementById('kline');
var chart=HQChart.Chart.JSChart.Init(divKLine);
option.NetworkFilter=(data, callback)=>{
MinuteNetworkFilter(data, callback); }
chart.SetOption(option);
HQChartData.Chart=chart;
};
return {
//hqchart数据
//HQChartData,
//DOM元素
DivApp,
DivKLine,
DivButtons,
//导出函数
ChangePeriod, //切换K线周期
ChangeMinute, //切换走势图
ChangeSymbol, //切换代码
};
}
}
</script>
<style >
.hqchart
{
position: relative;
}
</style>
如果还有问题可以加交流QQ群: 719525615
文章浏览阅读1k次。通过使用ajax方法跨域请求是浏览器所不允许的,浏览器出于安全考虑是禁止的。警告信息如下:不过jQuery对跨域问题也有解决方案,使用jsonp的方式解决,方法如下:$.ajax({ async:false, url: 'http://www.mysite.com/demo.do', // 跨域URL ty..._nginx不停的xhr
文章浏览阅读2k次。关于在 Oracle 中配置 extproc 以访问 ST_Geometry,也就是我们所说的 使用空间SQL 的方法,官方文档链接如下。http://desktop.arcgis.com/zh-cn/arcmap/latest/manage-data/gdbs-in-oracle/configure-oracle-extproc.htm其实简单总结一下,主要就分为以下几个步骤。..._extproc
文章浏览阅读1.5w次。linux下没有上面的两个函数,需要使用函数 mbstowcs和wcstombsmbstowcs将多字节编码转换为宽字节编码wcstombs将宽字节编码转换为多字节编码这两个函数,转换过程中受到系统编码类型的影响,需要通过设置来设定转换前和转换后的编码类型。通过函数setlocale进行系统编码的设置。linux下输入命名locale -a查看系统支持的编码_linux c++ gbk->utf8
文章浏览阅读750次。今天准备从生产库向测试库进行数据导入,结果在imp导入的时候遇到“ IMP-00009:导出文件异常结束” 错误,google一下,发现可能有如下原因导致imp的数据太大,没有写buffer和commit两个数据库字符集不同从低版本exp的dmp文件,向高版本imp导出的dmp文件出错传输dmp文件时,文件损坏解决办法:imp时指定..._imp-00009导出文件异常结束
文章浏览阅读143次。当下是一个大数据的时代,各个行业都离不开数据的支持。因此,网络爬虫就应运而生。网络爬虫当下最为火热的是Python,Python开发爬虫相对简单,而且功能库相当完善,力压众多开发语言。本次教程我们爬取前程无忧的招聘信息来分析Python程序员需要掌握那些编程技术。首先在谷歌浏览器打开前程无忧的首页,按F12打开浏览器的开发者工具。浏览器开发者工具是用于捕捉网站的请求信息,通过分析请求信息可以了解请..._初级python程序员能力要求
文章浏览阅读7.6k次,点赞2次,收藏6次。@Service标注的bean,类名:ABDemoService查看源码后发现,原来是经过一个特殊处理:当类的名字是以两个或以上的大写字母开头的话,bean的名字会与类名保持一致public class AnnotationBeanNameGenerator implements BeanNameGenerator { private static final String C..._@service beanname
文章浏览阅读6.9w次,点赞73次,收藏463次。1.前序创建#include<stdio.h>#include<string.h>#include<stdlib.h>#include<malloc.h>#include<iostream>#include<stack>#include<queue>using namespace std;typed_二叉树的建立
文章浏览阅读7.1k次。在Asp.net上使用Excel导出功能,如果文件名出现中文,便会以乱码视之。 解决方法: fileName = HttpUtility.UrlEncode(fileName, System.Text.Encoding.UTF8);_asp.net utf8 导出中文字符乱码
文章浏览阅读2.1k次,点赞4次,收藏23次。第一次实验 词法分析实验报告设计思想词法分析的主要任务是根据文法的词汇表以及对应约定的编码进行一定的识别,找出文件中所有的合法的单词,并给出一定的信息作为最后的结果,用于后续语法分析程序的使用;本实验针对 PL/0 语言 的文法、词汇表编写一个词法分析程序,对于每个单词根据词汇表输出: (单词种类, 单词的值) 二元对。词汇表:种别编码单词符号助记符0beginb..._对pl/0作以下修改扩充。增加单词
文章浏览阅读773次。我在使用adb.exe时遇到了麻烦.我想使用与bash相同的adb.exe shell提示符,所以我决定更改默认的bash二进制文件(当然二进制文件是交叉编译的,一切都很完美)更改bash二进制文件遵循以下顺序> adb remount> adb push bash / system / bin /> adb shell> cd / system / bin> chm..._adb shell mv 权限
文章浏览阅读6.8k次,点赞12次,收藏125次。1. 单目相机标定引言相机标定已经研究多年,标定的算法可以分为基于摄影测量的标定和自标定。其中,应用最为广泛的还是张正友标定法。这是一种简单灵活、高鲁棒性、低成本的相机标定算法。仅需要一台相机和一块平面标定板构建相机标定系统,在标定过程中,相机拍摄多个角度下(至少两个角度,推荐10~20个角度)的标定板图像(相机和标定板都可以移动),即可对相机的内外参数进行标定。下面介绍张氏标定法(以下也这么称呼)的原理。原理相机模型和单应矩阵相机标定,就是对相机的内外参数进行计算的过程,从而得到物体到图像的投影_相机-投影仪标定
文章浏览阅读2.2k次。文章目录Wayland 架构Wayland 渲染Wayland的 硬件支持简 述: 翻译一篇关于和 wayland 有关的技术文章, 其英文标题为Wayland Architecture .Wayland 架构若是想要更好的理解 Wayland 架构及其与 X (X11 or X Window System) 结构;一种很好的方法是将事件从输入设备就开始跟踪, 查看期间所有的屏幕上出现的变化。这就是我们现在对 X 的理解。 内核是从一个输入设备中获取一个事件,并通过 evdev 输入_wayland