highcharts图表放大属性(zoomType)说明以及示例详解

转载自:http://www.stepday.com/topic/?450

highcharts图表的API内,它自身有一个属性可以用来对highcharts图表进行放大处理。具体的请继续往下阅读:

这样的数据差异展示的图表让你苦恼吧!

highchartsseries数据如下所示:


1. series: [{
2. data: [29.9, 0, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 10000]


我们不难看出最大和最小数据之间的差异是1w,那么我们接着来看看效果图表是怎么样一个情况,请见下图:

数据差异太大,显示效果不够明显

我们不难看出0100多的节点间间隔很小,你完全不知道具体的数值是多少对吧,当然在这样的情况下我们可以非常明确地借用highcharts的属性将每个数据点的标签显示出来也可以,代码如下:


01. $(function () {
02. $('#container').highcharts({       
03. plotOptions:{
04. line:{
05. dataLabels:{
06. enabled:true, //是否显示数据标签
07. align:'left',
08. verticalAlign: 'bottom'
09. }
10. }
11. },
12. xAxis: {
13. categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
14. },       
15. series: [{
16. data: [29.9, 0, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 10000]       
17. }]
18. });
19. });


图表展示效果图如下:

加入dataLabels数据标签后


highcharts图表支持放大功能吗?能,那怎么做!!!

我会毫不犹豫地回答,highcharts图表支持图表放大功能的,很简单,我们只需要设置一下chart的zoomType属性即可,代码如下:


1. $('#container').highcharts({  
2. chart: {
3. zoomType:"xy" //放大什么坐标上的数据 可以是x、y、xy
4. },


我们只需要将鼠标选中想放大的某一区域,然后放开鼠标 即可实现放大效果,效果图如下:

设置了zoomType后鼠标选中放大区域

放大后的效果图如下:

highcharts图表放大后的效果图

点击“Reset zoom"按钮可以回到初始状态的图表。

  • 1
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 2
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值