highchars隐藏图例或者设置图例位置

最新推荐文章于 2025-06-28 10:17:21 发布

yw1688

最新推荐文章于 2025-06-28 10:17:21 发布

阅读量1.6w

点赞数 1

CC 4.0 BY-SA版权

分类专栏： Javascript HighCharts

本文链接：https://blog.youkuaiyun.com/yw1688/article/details/40651589

Javascript 同时被 2 个专栏收录

102 篇文章

订阅专栏

HighCharts

7 篇文章

订阅专栏

本文介绍了Highcharts中图例的位置配置方法及如何为图表添加点击事件。通过具体代码示例展示了如何禁用图例显示，以及如何在用户点击柱状图时触发特定动作。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

legend: {
            align: 'right',
            x: -70,
            verticalAlign: 'top',
            y: 20,
            floating: true,
            backgroundColor: (Highcharts.theme && Highcharts.theme.legendBackgroundColorSolid) || 'white',
            borderColor: '#CCC',
            borderWidth: 1,
            shadow: false
        },

加这个可以设置图例的位置，如果不想显示，则像下面这样写即可：

legend: {                                                                  
            enabled: false                                                         
        }

要给图表加点击事件，例如点某个柱形图，然后做某些动作，可以这样写：

plotOptions: {                                                             
            series: {                                                              
                lineWidth: 1,                                                      
                point: {                                                           
                    events: {                                                      
                        'click': function() {                                      
                            if (this.series.data.length > 1) this.remove();        
                        }                                                          
                    }                                                              
                }                                                                  
            }                                                                      
        }