2022-04-22 工作记录--Highcharts-图表点击事件 + 图例点击事件 + 图例格式化后的回调

`Highcharts`-图表点击事件 + 图例点击事件 + 图例格式化后的回调

一、前言

看似很简单的问题，其实里面有很多细节，所以做个笔记哟~❀

如下图：上面是图表，下面是图例哟☺️

二、官方文档

https://www.highcharts.com.cn/docs

三、图表点击事件

图表点击事件，简单解释下，就是：点击图表中对应板块时的事件。

1、写法一【特定图表的图表点击事件】

在plotOptions:{}里对应图表类型里（比如：饼图->pie）写点击事件【这样写就是有针对性地赋予特定图表点击事件】，下图以饼图为例：

在这里插入图片描述

对应代码：

// 每种图表类型属性设置
plotOptions: {// 饼状图pie: {showInLegend: true, // 显示饼图的图例allowPointSelect: true,cursor: 'pointer',dataLabels: {enabled: true,distance: 50,// 通过 format 或 formatter 来格式化数据标签显示format: '{point.name} 值：{point.y} 占比：{point.percentage:.1f}%',// formatter: function() {// // this 为当前的点（扇区）对象，可以通过  console.log(this) 来查看详细信息// return '<span style="color: ' + this.point.color + '"> 值：' + this.y + '，占比' + this.percentage + '%</span>';// },style: {color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black'}},events: { // 饼图的点击事件-调用自定义的函数pieClickclick: function (e) {// console.log(e.point.name);pieClick(e.point.name);}}}
},

2、写法二【任意图表的图表点击事件】

在与plotOptions:{}同级的series里面写点击事件【这样写就不用管是什么图表的点击事件了】，下图是以饼图为例：

在这里插入图片描述

对应代码：

// 图表要展现的数据
series: [{events: { // 图表点击事件click:function(e) { // 图表的点击事件-举例：调用自定义的函数pieClick// console.log(e.point.name);pieClick(e.point.name);}}
}]

四、图例点击事件

1、图例相关知识的官方文档

https://www.highcharts.com.cn/docs/basic-legend

2、除饼图以外的图例点击事件

在图例的官方文档往下翻，找到“三、图例点击事件”中的“1、默认图例点击事件”，如下图：

在这里插入图片描述

对应代码：

plotOptions: {series: {events: {legendItemClick: function(e) {/** 默认实现是显示或隐藏当前数据列，e 代表事件， this 为当前数据列*/}}}
}

3、饼图的图例点击事件

在图例的官方文档往下翻，找到“三、图例点击事件”中的“3、饼图图表点击事件”，如下图：

在这里插入图片描述
对应代码：

plotOptions: {pie: {point: {events: {legendItemClick: function(e) {console.log(e);console.log(e.target.name); // 通过e.target.name获取到对应的属性名return false; // 直接 return false 即可禁用图例点击事件（实现点击图例后，不能再默认地显示隐藏当前图例在图表里的对应数据）            }}}}
}

五、图例格式化后的回调

简单解释下，图例格式化后的回调是：一进入页面，图例展示的样式（以怎样的一种的格式展示出来，自定义滴）。

在图例的官方文档往下翻，找到“二、图例内容及定位”、，如下图：

在这里插入图片描述

举例：

plotOptions: {// 饼状图pie: {showInLegend: true, // 显示饼图的图例allowPointSelect: true,cursor: 'pointer',point: {events: {legendItemClick: function(e) { // 饼图图例的点击事件-调用函数pieClickconsole.log(e)pieClick(e.target.name);return false; // 直接 return false 即可禁用图例点击事件（实现点击图例后，不能再默认地显示隐藏当前图例在图表里的对应数据）}}},dataLabels: {enabled: true,distance: 20,// 通过 format 或 formatter 来格式化数据标签显示format: '{point.name} {point.percentage:.1f}%',style: {color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black'}}}
},
// 图例格式化
legend: {labelFormatter: function() {/**  格式化函数可用的变量：this， 可以用 console.log(this) 来查看包含的详细信息*  this 代表当前数据列对象，所以默认的实现是 return this.name*/// console.log(this);// console.log(this.y); // 属性值var index = this.index; // 索引值if(this.y == 0) { // 数据为0时$('#container .highcharts-legend .highcharts-legend-item').eq(index).children('.highcharts-point').attr('fill','#ccc'); // 数据为0的，小圆点显示灰色$('#container .highcharts-legend .highcharts-legend-item').eq(index).children('text').attr('style','color:#333333;cursor:not-allowed;font-size:12px;font-weight:bold;fill:#333333;');}return  this.name;}
},