HIGHCHARTS
  • 关于我们
    • 关于我们
    • 联系方式
    • 新闻动态
    • 合作伙伴
  • 在线商店
  • 在线实例
    • Highcharts 演示
    • Highstock 演示
    • Highmaps 演示
    • 甘特图演示
    • 客户案例
  • 文档教程
    • 使用教程
    • API 文档
    • 最新 API 文档(英文)
    • 兼容性
    • 常见错误
    • 更新日志
  • 服务与支持
    • 获取技术支持
    • 发展规划
    • 下载中心
    • 地图数据
    • 技术社区
  • 产品中心
    • Highcharts
    • Highstock
    • Highmaps
    • Highcharts iOS
    • Highcharts Androidnew
    • JShare
    • 爱图说
    • Highcharts 云服务
    • Highcharts 编辑器
    • 插件扩展
    • 应用扩展
  • 博客
  • 快速上手
    • Highcharts 系列软件简介
    • 1 分钟上手 Highcharts
    • 文件下载与使用
    • 通过 npm 安装
    • 通过 Bower 安装
    • 如何设置图表配置选项
    • Highcharts 兼容性
    • Highcharts 使用协议
  • 基础教程
    • 图表主要组成
    • 图表配置
    • 标题
    • 坐标轴
    • 数据列
    • 颜色
    • 数据提示框
    • 图例
    • 版权信息
    • HTML标签
    • 标示线
    • 标示带
    • 图表缩放
    • 语言文字
    • 标签及字符串格式化
    • 钻取功能
    • 3D 图表
    • 响应式
  • 数据处理
    • 数据处理概述
    • 服务端动态渲染图表
    • Ajax 请求数据接口
    • 处理文本或文本数据文件
    • 数据功能模块
  • 图表类型
    • 图表类型
    • 直线图
    • 曲线图
    • 面积图及面积范围图
    • 柱状图和条形图
    • 饼图
    • 范围图
    • 散点图及气泡图
    • 漏斗图及金字塔图
    • 极地图
    • 瀑布图
    • 误差线图
    • 箱线图
  • 高级特性
    • 堆叠图
    • 自由绘图
    • 国际化
  • 图表导出模块
    • 图表导出模块概述
    • 客户端导出
    • 搭建导出服务器
    • 命令行导出
    • 导出 Excel 数据文件
  • 图表设计及样式
    • 图表设计及样式
    • 颜色
    • 主题
  • 插件扩展
    • 插件扩展概述
    • 创建插件
    • 提交插件到官方插件库
  • 地图
    • 开始使用 Highmaps
    • 地图数据集
    • 经纬度
    • 地图导航器
  • Highstock
    • 开始使用 Highstock
    • 范围选择器
    • 导航器
    • 滚动条
    • K 线图
    • 技术指标
    • 自定义技术指标
  • Highcharts.NET
    • Highcharts .NET 使用教程
收起菜单 教程目录

图例

最后修改时间:2017-09-28 17:14

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

Highcharts 图例

一、图例样式

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图例样式itemStyle: { 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

三、图例点击事件

1、默认图例点击事件

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

plotOptions: {
  series: {
    events: {
        legendItemClick: function(e) {
            /*
             * 默认实现是显示或隐藏当前数据列,e 代表事件, this 为当前数据列
             */
        }
    }
  }
} 

2、禁用图例点击隐藏效果

plotOptions: {
  series: {
    events: {
        legendItemClick: function(e) {
            return false; // 直接 return false 即可禁用图例点击事件
        }
    }
  }
} 

在线试一试

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、如何不显示某个图例

设置 showInLegend

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

版权声明

本教程仅用于学习、研究和交流目的,欢迎非商业转载。转载请注明出处及完整的链接。

标题:图例 | Highcharts 使用教程

链接:https://www.highcharts.com.cn/docs/basic-legend/

赏
   上一篇 下一篇   
  目录
    简数科技微信,同步更新Highcharts教程

    订阅更新

    © 2019 Highcharts 中文官网,由 简数科技 提供服务,浙ICP备16004892号,浙公网安备33011002011664号
    在线客服

    选择服务类型

    技术问题

    • 技术社区
    • 技术支持
    • Q Q 群

    商业授权

    • 使用协议
    • 购买授权
    • 申请试用
    • 授权查询

    图表定制

    • 服务内容
    • VIP 专属服务

    销售服务:    技术服务:

    服务热线:0571 - 8620 8605    邮件:sales@jianshukeji.com

    服务时间:工作日 9:00 ~ 18:00    紧急服务 :7 x 24 响应(仅限电话)