⼗⼀、基础教程-图例（Legend）
图例是图表中⽤不同形状、颜⾊、⽂字等标⽰不同数据列，通过点击标⽰可以显⽰或隐藏该数据列；通过设置 abled = true | false 来打开或关闭图例。
⼀、图例样式
1、图例容器样式
图例容器指的是整个图例容器的样式，包含背景、边框、边距、宽度等，详细属性及说明见下表
参数名解释默认值backgroundColor背景颜⾊null borderColor边框颜⾊‘#909090’margin外边距15
padding内边距8
maxHeight最⼤⾼度null
navigation导航，当设置了最⼤⾼度后，图例⽆法完整显⽰时，则会⽤导航的形式展⽰（分页）
shadow图例阴影效果，赋值可以是 boolean 或 Object false
width图例宽度null verticalAlign垂直对齐⽅式，有 ‘top’， ‘middle’ 及 ‘bottom’ 可选‘bottom’useHTML是否以HTML形式渲染（默认是SVG渲染），当使⽤ HTML 模式渲染是，图例导航⽆效false
2、图例项样式
上⾯说到了图例容器的样式可以控制图例整体样式，对应配置图例⾥的内容是通过图例项相关属性来控制的，见下表
参数名解释默认值
itemDistance图例项间距20
itemStyle图例样式itemStyle: { cursor: ‘pointer’, color: ‘#3E576F’ } itemHiddenStyle图例隐藏时的样式itemHiddenStyle: { color: ‘#CCC’ }
itemHoverStyle图例⿏标划过时样式itemHoverStyle: { color: ‘#000’ }
itemMarginBottom图例项底边距0
itemMarginTop图例项顶部边距0
itemWidth图例项宽度null
symbolHeight图例项标⽰⾼度12
symbolRadius图例项标⽰圆⾓2
symbolWidth图例项标⽰宽度16
⼆、图例内容及定位
1. 图例内容
| 参数名 | 解释 | 默认值 |
|---------------- |------------------- | --- |
|labelFormat|图例⽂字格式化字符串 |{name}|
|labelFormatter|图例内容格式化函数|function() { return this.name}|
|reversed|是否倒序|false|
|rtl|⽂字是否显⽰在符号前⾯，主要针对阅读习惯从右⾄左的⽤户|false|
|title|图例标题 |title: { text: null, style: { fontWeight: "blod"}}|
关于格式化函数及格式化字符串这⾥简单说明如下：
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. 定位
| 参数名 | 解释 | 默认值 |
|---------------- |------------------- | --- |
| align|图例在图表中的对齐⽅式，有 “left”, "center", "right" 可选|“center”|
|floating|图例是否浮动，设置浮动后，图例将不占位置|false|
|layout|图例内容布局⽅式，有⽔平布局及垂直布局可选，对应的配置值是： “horizontal”， “vertical”|"horizontal"| |x|⽔平偏移|0|
|y|竖直偏移|0|
三、图例点击事件
1、默认图例点击事件
图例默认的点击⾏为是显⽰或隐藏当前数据列。
plotOptions: {
series: {
events: {
legendItemClick: function(e) {
/*
* 默认实现是显⽰或隐藏当前数据列，e 代表事件， this 为当前数据列
*/
}
}
}
}
2、禁⽤图例点击隐藏效果
plotOptions: {
series: {
events: {
legendItemClick: function(e) {
return false; // 直接return false即可禁⽤图例点击事件
fontweight意义}
}
}
}
3、饼图图表点击事件
上述代码对饼图是⽆效的，因为饼图的扇区是数据点对象，所有针对数据列的配置函数当然⽆效。
对于饼图对应 legendItemClick 事件是 point.legengItemClick 。
plotOptions: {
pie: {
point: {
events: {
legendItemClick: function(e) {
return false; // 直接return false即可禁⽤图例点击事件
}
}
}
}
}
4、⾃定义图例点击事件
默认是点击某个图例显⽰或隐藏当前数据列，这⾥改变为点击某个图例只显⽰当前数据列，隐藏其他数据列
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];
i === index ? s.show() : s.hide();
}
}
return false;
}
}
}
}
四、关于图例的常见问题
以下列举出关于图例的常见问题，
1、如何不显⽰某个图例
series: [{
data: [],
name: "",
showInLegend: false// 设置为 false 即为不显⽰在图例中
}, {
data: [],
name: "",
showInLegend: true// 默认值
}]
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论