原文地址: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放大缩小的更多相关文章

  1. PhotoView实现图片随手势的放大缩小的效果

    项目需求:在listView的条目中如果有图片,点击条目,实现图片的放大,并且图片可以根据手势来控制图片放大缩小的比例.类似于微信朋友圈中查看好友发布的照片所实现的效果. 思路是这样的:当点击条目的时 ...

  2. 【开源】专业K线绘制[K线主副图、趋势图、成交量、滚动、放大缩小、MACD、KDJ等)

    这是一个iOS项目雅黑深邃的K线的绘制. 实现功能包括K线主副图.趋势图.成交量.滚动.放大缩小.MACD.KDJ,长按显示辅助线等功能 预览图 最后的最后,这是项目的开源地址:https://git ...

  3. 鼠标上下滑动总是放大缩小页面,按住ctrl+0

    鼠标上下滑动总是放大缩小页面,可能是ctrl键失灵了,幸好键盘有两个ctrl键,按住ctrl+0,页面就正常了,吓死宝宝了,~~~~(>_<)~~~~

  4. WPF布局之让你的控件随着窗口等比放大缩小,适应多分辨率满屏填充应用

    一直以来,我们设计windows应用程序,都是将控件的尺寸定好,无论窗体大小怎么变,都不会改变,这样的设计对于一般的应用程序来说是没有问题的,但是对于一些比较特殊的应用,比如有背景图片的,需要铺面整个 ...

  5. C# GDI绘制矩形框,鼠标左键拖动可移动矩形框,滚轮放大缩小矩形框

    最近工作需要,要做一个矩形框,并且 用鼠标左键拖动矩形框移动其位置.网上查了一些感觉他们做的挺复杂的.我自己研究一天,做了一个比较简单的,发表出来供大家参考一下.如觉得简单,可路过,谢谢.哈哈. 先大 ...

  6. Android 本地/网路下载图片实现放大缩小

     Android 本地加载/网路下载图片实现放大缩小拖拉效果,自定义控件. package com.example.ImageViewCustom; import android.app.Activi ...

  7. HTML5 canvas处理图片的各种效果,包括放大缩小涂鸦等

    http://www.htmleaf.com/ziliaoku/qianduanjiaocheng/201502151385.html jQuery 缩放 旋转 裁剪图片 Image Cropper ...

  8. Canvas实现图片放大缩小移动操作

    对于HTML5相信大家都不陌生,很早就出来了,但是貌似都没有真正的使用过.最近做项目时要实现这样一个需求:一个图片,大小不固定,要求能实现类似地图一样放大.缩小.移动功能.这里就很合适使用html5的 ...

  9. CABasicAnimation的基本使用方法(移动·旋转·放大·缩小)

    出处:http://blog.csdn.net/iosevanhuang/article/details/14488239 CABasicAnimation类的使用方式就是基本的关键帧动画. 所谓关键 ...

随机推荐

  1. laravel passport加密jwt格式的access_token中的sub(user_id)字段

    在很多需求我们不希望别人知道用户在我们表中的 user_id :但是又想用数据库的自增 id 功能:一般时候在取出用户后加密 user_id 加密即可:但是总有那么几个不经意间就可能把我们的 user ...

  2. C语言数据结构_严蔚敏+吴伟民 课本源码

    http://www.cnblogs.com/kangjianwei101/category/791617.html

  3. 20175213 2018-2019-2 《Java程序设计》第8周学习总结

    教材学习内容总结 1:泛型主要目的是建立具有类型安全的集合框架,如链表,散列映射等数据结构. 泛型类的声明: class People<E> People是泛型类的名称,E是其中泛型,E可 ...

  4. iOS10以下版本不支持swiper

    解决办法,降低swiper4*版本引用低版本如3.4.2可以兼容iOS8,

  5. 利用linux curl爬取网站数据

    看到一个看球网站的以下截图红色框数据,想爬取下来,通常爬取网站数据一般都会从java或者python爬取,但本人这两个都不会,只会shell脚本,于是硬着头皮试一下用shell爬取,方法很笨重,但旨在 ...

  6. ELK日志分析平台搭建

    ELK平台介绍 在搜索ELK资料的时候,发现这篇文章比较好,于是摘抄一小段: 以下内容来自:http://baidu.blog.51cto.com/71938/1676798 日志主要包括系统日志.应 ...

  7. Nginx入门基础(一)

    Nginx介绍 Nginx 是一个高性能的 HTTP 和反向代理服务器,也是一个 IMAP/POP3/SMTP服务器. 官方测试Nginx能够支撑5万并发链接,并且cpu.内存等资源消耗却非常低,运行 ...

  8. LINUX | 谷歌云开启SSH及设置root密码

    一.设置root密码 1.先选择从浏览器打开ssh连接服务器 2.切换到root账号 sudo -i 3.设置root密码 passwd 然后会要求输入新密码,然后再重复一次密码,输入密码的时候不会显 ...

  9. 《Orange‘s》FAT12文件系统

    FAT12 层次 扇区(Sector):磁盘上的最小数据单元 簇(Cluster):一个或多个扇区 分区(Partition):通常指整个文件系统 引导扇区 引导扇区是整块软盘的第0个扇区,在这个扇区 ...

  10. bind和on的区别

    bind方法与on方法都是事件绑定,但是两者却又有着一个大区别:事件委托 jquery文档中bind和on函数绑定事件的用法: .bind(events [,eventData], handler) ...