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
时,图例的左边小圆点呈现灰色哟~