highcharts用于H5,实现左右拖动

2026-08-30

Highcharts可拖动式图表

Highcharts可拖动式图表默认情况下,Highcharts依据给定的数据列生成图表. 浏览者是无法改动图表的. 假设浏览者须要手动调整数据节点.就须要借助第三方插件Draggable Points.使用该插件后,浏览者能够直接拖动图表中的数据节点位置,从而改动图表的值. 拖动前效果拖动后效果 PS:该内容已经增加<网页图表Highcharts实践教程图表篇>v1.2.3中.

客户需求:禁止微信内的H5页面上下拖动: 解决方案: 网上的答案几乎都是阻止默认事件,即: document.body.addEventListener('touchmove' , function(e){ e.preventDefault(); }); 但是使用这个方法还存在一定的问题: bug1:有时生效有时失效: 原因:经过不间断的实践测试,发现有可能是网络加载的问题,在用户拖动页面的时候上面的功能代码还没加载出来,所以没有生效. 解决方法:监听页面资源加载,等页面内所有资源加载完毕后再将

JS国际化网站中英文切换（理论支持所有语言）应用于h5版APP

网页框架类APP实现国际化参考文案一参考:https://blog.csdn.net/CSDN_LQR/article/details/78026254 另外付有自己实现的方法本人用于H5版的APP使用一.简述把页面成国际化,实现中英文切换,为此,网上找了一些中英文切换的解决方案,大概为如下两种: 1.使用谷歌整站翻译Api 优点:只须调用接口,即可轻松完成整站翻译,翻译准确度还行.缺点:需要梯子.参考文章:js代码实现网站中英文相互翻译2.自己编写中英文对照表,用js控制优点:一对一

在OAF页面中集成ECharts以及highcharts用于显示图表

历史博文中有讲解在请求中输出基础图表的方式,见地址:EBS 请求输出Html报表集成Echarts 本文讲述在OAF中集成这两类图表. 集成的基本思路:在OAF页面中加入一个rawText组件,在rawText中加入html代码即可,如此简单. 步骤一:官网下载echarts,highcharts相应的js,放入OA_HTML路径(本例在OA_HTML中加入了文件夹cux). 步骤二:写OAF页面及CO. ECharts示例 EChartsPG <?xml version = '1.0' enc

h5+js随机拖动鼠标产生动画效果

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Typ

【腾讯Bugly干货分享】H5 视频直播那些事

本文来自于腾讯bugly开发者社区,非经作者同意,请勿转载,原文地址:http://dev.qq.com/topic/57a42ee6503dfcb22007ede8 Dev Club 是一个交流移动开发技术,结交朋友,扩展人脉的社群,成员都是经过审核的移动开发工程师.每周都会举行嘉宾分享,话题讨论等活动. 本期,我们邀请了腾讯SNG Web前端开发工程师——吕鸣,为大家分享<H5 视频直播那些事>. 如何加入 Dev Club? 移动端开发经验 >= 2 年,微信扫描下方群管理微信二维

利用简洁的图片预加载组件提升h5移动页面的用户体验

在做h5移动页面,相信大家一定碰到过页面已经打开,但是里面的图片还未加载出来的情况,这种问题虽然不影响页面的功能,但是不利于用户体验.抛开网速的原因,解决这个问题有多方面的思路:最基本的,要从http请求合并,缓存管理,图片压缩等方面做性能优化:另外就是可以对页面里用到的所有图片做预加载的处理,当用户打开页面的时候不立即显示第一屏,而是先显示资源加载效果,等到加载完毕,再来显示页面的主内容,这样就能解决那个问题.虽然这种加载效果占用了用户的浏览时间,但是我们可以把它做的好看有趣一点,所以也不会影

【腾讯bugly干货分享】解耦---Hybrid H5跨平台性思考

本文来自于腾讯bugly开发者社区,非经作者同意,请勿转载,原文地址:http://bugly.qq.com/bbs/forum.php?mod=viewthread&tid=1275&extra=page%3D1 跨平台,是H5最重要的能力之一.而 Hybrid H5 因强依赖于具体 app,往往不具有跨平台性.这时,将强依赖关系解耦,即可恢复 H5 的跨平台能力.近期本人负责手Q 红包打赏项目的前端开发,因项目涉及到多 app 跨平台兼容,对 hybrid H5 的跨平台性有了一定的

运用预加载提升H5移动页面的用户体验

原文地址:http://www.grycheng.com/?p=2188 在做h5移动页面,相信大家一定碰到过页面已经打开,但是里面的图片还未加载出来的情况,这种问题虽然不影响页面的功能,但是不利于用户体验.抛开网速的原因,解决这个问题有多方面的思路:最基本的,要从http请求合并,缓存管理,图片压缩等方面做性能优化:另外就是可以对页面里用到的所有图片做预加载的处理,当用户打开页面的时候不立即显示第一屏,而是先显示资源加载效果,等到加载完毕,再来显示页面的主内容,这样就能解决那个问题.虽然这种加

H5 视频直播相关技术

一.移动视频直播发展大家首先来看下面这张图: 可以看到,直播从 PC 到一直发展到移动端,越来越多的直播类 App 上线,同时移动直播进入了前所未有的爆发阶段,但是对于大多数移动直播来说,还是要以 Native 客户端实现为主,但是 H5 在移动直播端也承载着不可替代的作用,例如 H5 有着传播快,易发布的优势,同时最为关键的时 H5 同样可以播放直播视频. 大家可以看下面这张大概的实现图完整的直播可以分为以下几块: 视频录制端:一般是电脑上的音视频输入设备或者手机端的摄像头或者麦克风,目前

移动端-H5预加载页面

利用简洁的图片预加载组件提升h5移动页面的用户体验阅读目录 1. 实现思路 2. demo说明 3. 注意事项 4. 总结在做h5移动页面,相信大家一定碰到过页面已经打开,但是里面的图片还未加载出来的情况,这种问题虽然不影响页面的功能,但是不利于用户体验.抛开网速的原因,解决这个问题有多方面的思路:最基本的,要从http请求合并,缓存管理,图片压缩等方面做性能优化:另外就是可以对页面里用到的所有图片做预加载的处理,当用户打开页面的时候不立即显示第一屏,而是先显示资源加载效果,等到加

移动浏览器H5页面通过scheme打开本地应用

在移动端浏览器H5页面中,点击按钮打开本地应用主要通过 scheme 协议.本文主要介绍如何在浏览器H5页面中通过 scheme 协议打开本地应用. scheme协议定义 scheme 是一种页面之间跳转的协议,不仅可以用于app之间进行跳转,还可以用于 H5 页面跳转到app页面. 无论Android还是IOS,都可以通过在H5页面中打开 scheme 协议的地址,从而打开本地app. scheme 协议定义和 http 协议类似,都是标准的 URI 结构. [scheme:][//host:

H5视频直播扫盲

H5视频直播扫盲 2016-05-25 • 前端杂项 • 14 条评论 • lvming19901227 视频直播这么火,再不学就out了. 为了紧跟潮流,本文将向大家介绍一下视频直播中的基本流程和主要的技术点,包括但不限于前端技术. 1 H5到底能不能做视频直播? 当然可以, H5火了这么久,涵盖了各个方面的技术. 对于视频录制,可以使用强大的webRTC(Web Real-Time Communication)是一个支持网页浏览器进行实时语音对话或视频对话的技术,缺点是只在PC的chrome

javascript完美实现图片拖动改变顺序

在web页面中,需要改变多个元素的位置,可以通过元素拖动来实现.HTML5中加入了一个全局属性draggable,通过设置true/false来控制元素是否可拖动. 下面以图片拖动为例,用jQuery来实现:页面上有多个图片,把一个图片拖动到其他两个图片中间,就可以将这个图片的位置插入到两图之间. html> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js">&l

HTML5视频直播及H5直播扫盲

章来源:http://geek.csdn.net/news/detail/95188 分享内容简介: 目前视频直播,尤其是移动端的视频直播已经火到不行了,基本上各大互联网公司都有了自己的直播产品,所以对于直播的一些基本知识和主要技术点也要有所了解,本次分享就向大家介绍一下其中的奥秘. 内容大体框架: 1. 怎样利用 HTML5 来播放直播视频 2. 怎样录制直播视频 3. 怎样实时上传直播视频 4. 直播中的用户交互分享人介绍: 吕鸣目前在腾讯SNG担任手Q的web前端开发工作博客:htt

html5.0学习记录（一）——可拖动视频播放器

最近自己在重新学习html5新特性,了解到有视频标签和拖动标签,于是自己用这两个特性写了一个小demo,主要功能就是可以通过拖动视频来直接播放.效果图如下: 页面使用了<video>标签和drag,drop方法.左侧是动态渲染的视频列表,里面title包含着视频路径信息,右侧是视频播放器. js代码: // 拖拽开始 function dragStart() { let e = window.event; e.dataTransfer.setData('video', e.target.tit

1.前端数据可视化插件:Highcharts、Echarts和D3（区别）

前端数据可视化插件有很多,但我用过的只有Highcharts(https://www.hcharts.cn/).Echarts(http://echarts.baidu.com/)和D3(https://d3js.org/), Web开发过程中选择使用哪一个插件是很重要的问题.就我个人而言,一般会从以下几点考虑. 1.兼容性使用一个插件之前必须要先评估一下它对浏览器的兼容性,不然写完了发现没法儿用就得不偿失了. 经过多次尝试,我初步判断这三个插件的兼容性是这样的: Highcharts 兼

uniapp H5引入腾讯地图

在网上搜索了许多关于uniapp引入腾讯地图的方法都以失败告终,我开发的应用主要使用于H5,小程序与H5是不同的sdk,就不在这说了,况且小程序有手把手教学,可参考腾讯地图官网https://lbs.qq.com/ 想看怎么导入,直接跳到第三点开发过程中主要遇到的问题为: 1.SDK问题网上关于sdk的申请已经有很多教程了,此处便不多说,uniapp内置了map组件,但是使用过的人都知道,uniapp内部的组件,只支持了标点marker等一些简单api,如果想使用搜索附近商店.搜索附近医院.

webview和H5交互

由于H5的灵活多变,动态可配的特点,也为了避免冗长的审核周期,H5页面在app上的重要性正日益突显. iOS应用于H5交互的控件主要是UIWebView及WKWebView WKWebView是14年随iOS8推出的,很好的解决了UIWebView加载速度慢,内存占用大的问题 WebViewJavaScriptBridge是一款轻量级的框架,使用它结合wkwebview能十分方便的实现源生与H5的交互 webviewJavaScrptBridge的基本使用 1.初始化需bind视图 [WebV

HTML 事件

1.HTML 全局事件属性 HTML4 的新特性之一就是可以使 HTML 事件触发浏览器中的行为,比方说当用户点击某个 HTML 元素时启动一段 JavaScript,在 HTML5 中还增加了一些新的事件属性. HTML 事件就是发生在 HTML 元素上的事情.当在 HTML 页面中使用 JavaScript 时, JavaScript 就可以触发这些事件.HTML 事件可以是浏览器行为,也可以是用户行为.浏览器行为比如:页面加载时触发事件,页面关闭时触发事件等等.用户行为比如:点击按钮触发事

Android UI开发之开源控件项目整理

一.Banner 1.https://github.com/youth5201314/banner Android广告图片轮播控件,支持无限循环和多种主题,可以灵活设置轮播样式.动画.轮播和切换时间.位置.图片加载框架等! 使用方式为,在build.gradle里面增加如下配置: dependencies{ compile 'com.youth.banner:banner:1.4.10' //最新版本 } 效果图如下: 二.Calendar 1.https://github.com/xiaoji

highcharts用于H5,实现左右拖动

热门专题