HightChart图例(Legend)

图例是图表中用不同形状、颜色、文字等 标示不同数据列,通过点击标示可以显示或隐藏该数据列;通过设置 legend.enabled = true | false 来打开或关闭图例。

一、图例样式

1、图例容器样式

图例容器指的是整个图例容器的样式,包含背景、边框、边距、宽度等,详细属性及说明见下表

参数名 解释 默认值
backgroundColor 背景颜色 null
borderColor 边框颜色 '#909090'
margin 外边距 15
padding 内边距 8
maxHeight 最大高度 null
navigation 导航,当设置了最大高度后,图例无法完整显示时,则会用导航的形式展示(分页),详见API文档  
shadow 图例阴影效果,赋值可以是 boolean 或 Object,详见API文档 false
width 图例宽度 null
verticalAlign 垂直对齐方式,有 'top', 'middle' 及 'bottom' 可选 'bottom'
useHTML 是否以HTML形式渲染(默认是SVG渲染),当使用 HTML 模式渲染是,图例导航无效 false

2、图例项样式

上面说到了图例容器的样式可以控制图例整体样式,对应配置图例里的内容是通过图例项相关属性来控制的,见下表

参数名 解释 默认值
itemDistance 图例项间距 20
itemStyle 图例样式 temStyle: { cursor: 'pointer', color: '#3E576F' }
itemHiddenStyle 图例隐藏时的样式 itemHiddenStyle: { color: '#CCC' }
itemHoverStyle 图例鼠标划过时样式 itemHoverStyle: { color: '#000' }
itemMarginBottom 图例项底边距 0
itemMarginTop 图例项顶部边距 0
itemWidth 图例项宽度 null
symbolHeight 图例项标示高度 12
symbolPadding 图例项标示内边距 5
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

三、图例事件

图例默认的点击行为是显示或隐藏当前数据列。

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];

                        i === index ? s.show() : s.hide();
                    }
                }

                return false;
            }
        }
    }
} 

在线试一试

四、关于图例的常见问题

以下列举出关于图例的常见问题,

1、如何不显示某个数据列的图例

1)设置 showInLegend

series: [{
    data: [],
    name: "",
    showInLegend: false // 设置为 false 即为不显示在图例中
}, {
    data: [],
    name: "",
    showInLegend: true // 默认值
}] 

2)自定义图例格式化函数

legend: {
    layout: 'vertical',
    backgroundColor: '#FFFFFF',
    floating: true,
    align: 'left',
    verticalAlign: 'top',
    x: 90,
    y: 45,
    labelFormatter: function() {
        /*
         * 获取数据列下标,通过下标判断做一系列处理
         * 还可以通过获取数据列名字等来做判断(通过 console.log(this) 来查看数据列详细信息)
         */
        var index = this._i;

        // return null 则可以不显示图例项
        return index === 0 ? null : this.name;
    }
} 

在线试一试

2、图例是否可拖动

可以,利用官方插件“Draggable Legend” 即可实现

3、是否可以在图例中显示数值

可以,同样是通过官方插件实现,见 “Vlue in legend”

更多图例相关的插件见: http://www.hcharts.cn/p/index.php?s=legend

你可能感兴趣的:(JS/jquery/DOM,Highcharts)