实现highcharts放大缩小
原文地址:http://www.stepday.com/topic/?800
当我们将图表某个区域放大值某一个倍数后发现刻度间隔距离也放大了,由于刻度间隔还是原来初始所设定的值,从而让局部数据的X轴刻度不是很清楚,虽然我们可以将鼠标移动至数据点上进行查看,但是很费事。所以就希望做到放大后能够逐渐减小X轴刻度间隔,图表回到初始值后重新设置原始的坐标刻度间隔。这样一来就能够很友好地响应用户的浏览体验了。
于是产生了两个疑问:
1、图表放大时如何动态修改X轴的刻度间隔(tickInterval);
2、图表Reset zoom按钮点击后如何捕获这个动作从而让其刻度间隔(tickInterval)设置为初始值。
解决方案:
一、何时动态修改X周刻度间隔
我们通过监听chart的selection选择事件,只要用户选择了图表区域,图表将会放大,所以我们在这个事件内实现图表刻度的缩小:
01.
DynamicChangeTickInterval(1);
view sourceprint?
1.
//动态修改xAxis的刻度间隔值
2.
function DynamicChangeTickInterval(interval) {
3.
chart.xAxis[0].update({
4.
tickInterval: interval
5.
});
6.
}
二、如何监听图表Reset zoom按钮事件
图表放大后将会显示一个还原图表的按钮,当用户点击此按钮后图表将会redraw重画,但是刻度间隔不会还原至初始值,所以我们需要重写Highcharts图表的这个按钮事件,通过检查源码得知其按钮所调用的方法为:zoomOut
这样一来就已经达到我们的目标了,最后贴上示例的完整代码:
01.
02.
<</code>html>
03.
<</code>head>
04.
<</code>meta http-equiv="Content-Type" content="text/html; charset=utf-8">
05.
<</code>title>Highcharts Example</</code>title>
06.
<</code>script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></</code>script>
07.
<</code>script type="text/javascript">
08.
var chart = null;
09.
var OldInterval = 3;
10.
$(function () {
11.
//设置初始值
12.
Highcharts.setOptions({
13.
lang: {
14.
resetZoom: "返回",
15.
resetZoomTitle: "回到初始状态"
16.
}
17.
});
18.
19.
$('#container').highcharts({
20.
chart: {
21.
type: 'line',
22.
zoomType: 'x',
23.
events: {
24.
//监听图表区域选择事件
25.
selection: function () {
26.
//动态修改
27.
DynamicChangeTickInterval(1);
28.
}
29.
}
30.
},
31.
title: {
32.
text: "图表放大后动态设置X轴刻度间隔且还原后回到原始状态示例"
33.
},
34.
xAxis: {
35.
tickInterval: OldInterval //默认间隔值为3
36.
},
37.
credits: {
38.
text: "www.stepday.com",
39.
href: "http://www.stepday.com",
40.
style: {
41.
color:"red"
42.
}
43.
},
44.
series: [{
45.
data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
46.
}]
47.
}, function (chartObj) {
48.
//获得图表对象
49.
chart = chartObj
50.
});
51.
//扩展或者重写Highcharts图表组件的方法
52.
ExtendHighcharts();
53.
});
54.
55.
//动态修改xAxis的刻度间隔值
56.
function DynamicChangeTickInterval(interval) {
57.
chart.xAxis[0].update({
58.
tickInterval: interval
59.
});
60.
}
61.
62.
//扩展或者重写Highcharts图表组件的方法
63.
function ExtendHighcharts() {
64.
Highcharts.extend(Highcharts.Chart.prototype, { zoomOut: function () {
65.
//还原图表X轴的间隔
66.
DynamicChangeTickInterval(OldInterval);
67.
//还原图表初始状态
68.
this.zoom();
69.
}
70.
});
71.
}
72.
</</code>script>
73.
</</code>head>
74.
<</code>body>
75.
<</code>script src="../js/highcharts.js"></</code>script>
76.
<</code>div id="container" style="width: 500px; height: 400px; margin: 0 auto">
77.
</</code>div>
78.
</</code>body>
79.
</</code>html>
三、最终演示效果
效果查看地址请访问:http://jsfiddle.net/sTWSL/
实现highcharts放大缩小的更多相关文章
- PhotoView实现图片随手势的放大缩小的效果
项目需求:在listView的条目中如果有图片,点击条目,实现图片的放大,并且图片可以根据手势来控制图片放大缩小的比例.类似于微信朋友圈中查看好友发布的照片所实现的效果. 思路是这样的:当点击条目的时 ...
- 【开源】专业K线绘制[K线主副图、趋势图、成交量、滚动、放大缩小、MACD、KDJ等)
这是一个iOS项目雅黑深邃的K线的绘制. 实现功能包括K线主副图.趋势图.成交量.滚动.放大缩小.MACD.KDJ,长按显示辅助线等功能 预览图 最后的最后,这是项目的开源地址:https://git ...
- 鼠标上下滑动总是放大缩小页面,按住ctrl+0
鼠标上下滑动总是放大缩小页面,可能是ctrl键失灵了,幸好键盘有两个ctrl键,按住ctrl+0,页面就正常了,吓死宝宝了,~~~~(>_<)~~~~
- WPF布局之让你的控件随着窗口等比放大缩小,适应多分辨率满屏填充应用
一直以来,我们设计windows应用程序,都是将控件的尺寸定好,无论窗体大小怎么变,都不会改变,这样的设计对于一般的应用程序来说是没有问题的,但是对于一些比较特殊的应用,比如有背景图片的,需要铺面整个 ...
- C# GDI绘制矩形框,鼠标左键拖动可移动矩形框,滚轮放大缩小矩形框
最近工作需要,要做一个矩形框,并且 用鼠标左键拖动矩形框移动其位置.网上查了一些感觉他们做的挺复杂的.我自己研究一天,做了一个比较简单的,发表出来供大家参考一下.如觉得简单,可路过,谢谢.哈哈. 先大 ...
- Android 本地/网路下载图片实现放大缩小
Android 本地加载/网路下载图片实现放大缩小拖拉效果,自定义控件. package com.example.ImageViewCustom; import android.app.Activi ...
- HTML5 canvas处理图片的各种效果,包括放大缩小涂鸦等
http://www.htmleaf.com/ziliaoku/qianduanjiaocheng/201502151385.html jQuery 缩放 旋转 裁剪图片 Image Cropper ...
- Canvas实现图片放大缩小移动操作
对于HTML5相信大家都不陌生,很早就出来了,但是貌似都没有真正的使用过.最近做项目时要实现这样一个需求:一个图片,大小不固定,要求能实现类似地图一样放大.缩小.移动功能.这里就很合适使用html5的 ...
- CABasicAnimation的基本使用方法(移动·旋转·放大·缩小)
出处:http://blog.csdn.net/iosevanhuang/article/details/14488239 CABasicAnimation类的使用方式就是基本的关键帧动画. 所谓关键 ...
随机推荐
- my题库
数论: 51nod 1240 莫比乌斯函数 51nod 1135 原根 图论: 51nod 1264 线段相交 51nod 1298 圆与三角形 dp: 数位dp: hdu 4734 51nod 10 ...
- IOS 微信返回按钮事件控制弹层关闭还是返回上一页
在微信公共号内绑定域名后或微信内打开第三方链接跳转非单页面网站时,经常会有弹层Modal的需求,此时如果用户习惯性点击微信自带的返回“<”按钮,就会跳转回上一页或退出网站,而为了避免这种不好的误 ...
- position:fixed失效情况
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- hibernate的开始
1.1对象的持久化 对象持久化是指将内存中的对象保存到可永久保存的存储设备中(如磁盘)的一种技术.(hibernate是通过id来管理对象) 1.2怎样实现持久化 1 对象序列化 2 JDBC 3 O ...
- ActionScript3.0(AS3)中的泛型数组Vector
Adobe官方并没有"泛型数组"的叫法,这是我自己对Vector的叫法(有点标题党),不过Vector在使用上确实跟c#中的泛型数组有些相似之处. 原作者:菩提树下的杨过出处:ht ...
- WPF常用布局介绍
概述:本文简要介绍了WPF中布局常用控件及布局相关的属性 1 Canvas Canvas是一个类似于坐标系的面板,所有的元素通过设置坐标来决定其在坐标系中的位置..具体表现为使用Left.Top.Ri ...
- python+selenium页面自动化 元素定位实际遇到的各种问题(持续更新)
1.class属性有空格 (已验证) 当classname 中存在空格的时候,直接使用find_element_by_class_name时,会显示定位失败,此时,需要将classname中的空格替 ...
- PDO查询结果中文乱码
PDO::MYSQL_ATTR_INIT_COMMAND (整数)连接到MySQL服务器时执行的命令.重新连接时会自动重新执行.请注意,此常量只能driver_options 在构建新的数据库句柄时在 ...
- leetcode 1004最大连续1的个数
给定一个由若干 0 和 1 组成的数组 A,我们最多可以将 K 个值从 0 变成 1 . 返回仅包含 1 的最长(连续)子数组的长度. 输入:A = [1,1,1,0,0,0,1,1,1,1,0], ...
- 对webdriver-driver句柄的理解
先贴代码: from selenium import webdriver //首先导入selenium(webdriver)相关模块 driver = webdriver.Firefox() ...