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: {
// 饼图的点击事件-调用自定义的函数pieClick
click: 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) {
// 饼图图例的点击事件-调用函数pieClick
console.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;
}
},
结果：
如下图所示，数据为
0时，图例的左边小圆点呈现灰色哟~
