Highcharts-chart click event + legend click event + callback after legend formatting
I. Introduction
- It seems like a simple question, but there are actually a lot of details in it, so make a note~❀
- As shown below: Above is the chart, below is the legend ☺️
2. Official documents
https://www.highcharts.com.cn/docs
3. Chart click event
The chart click event, simply explained, is: the event when the corresponding section in the chart is clicked.
1. Writing method one [Chart click event of a specific chart]
Write a click event in
plotOptions:{}the corresponding chart type (for example: pie chart ->pie) [this is to give a specific chart click event in a targeted manner], the following figure takes a pie chart as an example:
Corresponding code:
// 每种图表类型属性设置
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. Writing method 2 [Chart click event of any chart]
Write the click event in the
plotOptions:{}same level [in this way, you don't need to worry about the click event of the chart]. The following picture is an example of a pie chart:series
Corresponding code:
// 图表要展现的数据
series: [{
events: {
// 图表点击事件
click:function(e) {
// 图表的点击事件-举例：调用自定义的函数pieClick
// console.log(e.point.name);
pieClick(e.point.name);
}
}
}]
Fourth, the legend click event
1. Official documentation of legend-related knowledge
https://www.highcharts.com.cn/docs/basic-legend
2. Legend click events other than pie charts
Scroll down in the official document of the legend and find "1. Default legend click event" in "3. Legend click event", as shown below:
Corresponding code:
plotOptions: {
series: {
events: {
legendItemClick: function(e) {
/*
* 默认实现是显示或隐藏当前数据列，e 代表事件， this 为当前数据列
*/
}
}
}
}
3. The legend click event of the pie chart
Scroll down in the official documentation of the legend , and find "3. Pie chart click event" in "3. Legend click event", as shown below:
Corresponding code:
plotOptions: {
pie: {
point: {
events: {
legendItemClick: function(e) {
console.log(e);
console.log(e.target.name); // 通过e.target.name获取到对应的属性名
return false; // 直接 return false 即可禁用图例点击事件（实现点击图例后，不能再默认地显示隐藏当前图例在图表里的对应数据）
}
}
}
}
}
5. Callback after legend formatting
To briefly explain, the callback after the legend is formatted is: as soon as you enter the page, the style of the legend display (in what format to display it, customize the drop).
Scroll down in the official document of the legend and find "2. Legend content and positioning", as shown below:
Example:
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;
}
},
result:
As shown in the figure below, when the data is
01 , the small dot on the left side of the legend is gray~
