本文详述了Highcharts图例的使用，包括如何通过设置legend.enabled控制图例的开关，图例容器和图例项的样式定制，以及如何自定义图例内容的格式化和点击事件，如禁用图例点击隐藏效果或改变图例点击响应。
图例是图表中用不同形状、颜色、文字等 标示不同数据列，通过点击标示可以显示或隐藏该数据列；通过设置 legend.enabled = true | false 来打开或关闭图例。图例在图表中很常用，所以我们应该学习Highcharts 的图例设置。
一、图例样式
1、图例容器样式
图例容器指的是整个图例容器的样式，包含背景、边框、边距、宽度等，详细属性及说明见下表
2、图例项样式
上面说到了图例容器的样式可以控制图例整体样式，对应配置图例里的内容是通过图例项相关属性来控制的，见下表
二、图例内容及定位
1、图例内容
关于格式化函数及格式化字符串这里简单说明如下：
labelFormatter: function() {
/*
* 格式化函数可用的变量：this， 可以用 console.log(this) 来查看包含的详细信息
* this 代表当前数据列对象，所以默认的实现是 return this.name
*/
return this.name + '(Click to hide or show)';
}
labelFormat 格式化字符是格式化函数的一种简写方式，即用包含变量的字符串代替函数。
对于上面格式话函数的代码，完全可以用更简洁的方式实现：
labelFormat: '{name} (Click to hide or show)';
2、定位
下面是图例位置的确定的一些配置
三、图例事件
图例默认的点击行为是显示或隐藏当前数据列。
plotOptions: {
series: {
events: {
legendItemClick: function(e) {
/*
* 默认实现是显示或隐藏当前数据列，e 代表事件， this 为当前数据列
*/
}
}
}
}
禁用图例点击隐藏效果
plotOptions: {
series: {
events: {
legendItemClick: function(e) {
return false; // 直接 return false 即可禁用图例点击事件
}
}
}
}
上述代码对饼图是无效的，API给出的说明如下
Not applicable to pies, as the legend item is per point. See point.events.
也就是对于饼图对应 legendItemClick 事件是 point.legengItemClick。
plotOptions: {
pie: {
point: {
events: {
legendItemClick: function(e) {
return false; // 直接 return false 即可禁用图例点击事件
}
}
}
}
}
改变图例点击默认响应（默认是点击某个图例显示或隐藏当前数据列，这里改变为点击某个图例只显示当前数据列，隐藏其他数据列）
plotOptions: {
series: {
events: {
legendItemClick: function(e) {
var index = this.index;
var series = this.chart.series;
if (!series[index].visible) {
for (var i = 0; i < series.length; i++) {
var s = series;
i === index ? s.show() : s.hide();
}
}
return false;
}
}
}
}
文章来自：慧都控件网
扫一扫
897
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
