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

最新推荐文章于 2025-10-23 11:19:25 发布

转载最新推荐文章于 2025-10-23 11:19:25 发布 · 1w 阅读

higncharts 专栏收录该内容

4 篇文章

订阅专栏

本文介绍如何使用Highcharts的内置功能解决数据差异大导致的图表展示问题，包括通过设置dataLabels显示每个数据点的具体数值及利用chart的zoomType属性实现图表的局部放大。

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

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

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

highcharts的series数据如下所示：

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，那么我们接着来看看效果图表是怎么样一个情况，请见下图：

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

我们不难看出0和100多的节点间间隔很小，你完全不知道具体的数值是多少对吧，当然在这样的情况下我们可以非常明确地借用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"按钮可以回到初始状态的图表。