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

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



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

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

highcharts的series数据如下所示：

view sourceprint?

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的属性将每个数据点的标签显示出来也可以，代码如下：

view sourceprint?

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.

});

图表展示效果图如下：



highcharts图表支持放大功能吗？能，那怎么做！！！

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

view sourceprint?

1.

$(

'#container'

).highcharts({

2.

chart: {

3.

zoomType:

"xy"

//放大什么坐标上的数据 可以是x、y、xy

4.

},

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



放大后的效果图如下：



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