highcharts图表的上钻下钻，下钻数据，与回取数据

最新推荐文章于 2025-04-30 11:08:29 发布

weixin_30755709

最新推荐文章于 2025-04-30 11:08:29 发布

阅读量483

点赞数

CC 4.0 BY-SA版权

文章标签： axure

原文链接：http://www.cnblogs.com/Xanthus/p/9486838.html

本文详细介绍了Highcharts图表的上下钻功能实现方法，包括如何通过drillup事件回调获取上钻数据并进行联动操作，如何在点击事件中设置下钻行为，以及如何调整返回按钮的文字描述和位置，确保图表的美观性和用户体验。

通常图表在下钻之后，会点返回，返回之后，可能需要调用上钻回调事件，在drillup事件里获取上钻数据，然后对需要联动进行操作：

chart: {
          type: 'column',
          events: {
          drillup: function (e) { 
          var id = e.seriesOptions.id;
          xxxx= id;
          search();
} 
}
},

接下来是介绍常见操作，highcharts的下钻，在events里进行操作：

plotOptions: {
    events: {
                click: function (e) {
                             xxxxx = e.point.id;
                             search();
                            }
                 }
              }
},

上下钻中，返回按钮文字描述，全局lang：

lang: {
     drillUpText: '返回上一级'
}

上下钻中，返回按钮默认位置可能会档住图标，设置drilldown的参数，移动位置方法：

plotOptions: {
  drilldown: {
　　  drillUpButton: {
　　  position: {
　　  y: -38,
　　  x: -40
　　}
},

上下钻中，调整theme的参数，设置返回按钮文字的高度：

plotOptions: {
　　theme: {
　　　　height: 12,
　　}

}

转载于:https://www.cnblogs.com/Xanthus/p/9486838.html