HighCharts-highcharts resetZoom点击事件

最新推荐文章于 2025-06-06 09:16:48 发布

weixin_33895516

最新推荐文章于 2025-06-06 09:16:48 发布

阅读量1.2k

点赞数

本文介绍如何在Highcharts中实现缩放与重置功能。通过监听selection事件，判断是否为重置操作，并据此更新x轴的最大值。适用于需要自定义缩放行为的图表应用。

场景：zoom缩放功能：

选中x轴的一段区域后，需要解除x轴已设定的max值对zoom缩放功能的影响；

点击'reset zoom'后，又需要将max值重新赋值给x轴。

查遍highcharts api，终于找到一个入口可以捕获'reset zoom'的点击事件。

点击'缩放重置'和选中x轴的一段zoom区域时，都会触发selection事件。

如果是选中x轴的一段zoom区域，event.xAxis中会保存选中zoom区域的起点值(min)和结束点值(max).

如果是点击'缩放重置',event.xAxis的值则是undefined.

由此可以区分是点击了'缩放重置',还是选择了一段zoom区域。

代码如下：

        chart: {
            renderTo : 'test_container',
            type : 'scatter',
            zoomType : 'x',
            events: {
                selection :  function (event) {
                 // 获取操作chart
                 var chart = .....;
// 点击缩放重置
                    if(event.xAxis == undefined){
                        // x轴最大值设为xMaxValue
                        chart.xAxis[0].update({ max: xMaxValue});
                 }
                 // 选择x轴区域
                    else{
                        // x轴最大值设为null
                        chart.xAxis[0].update({ max: null});
                 }
                }
            }
        },