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

标示线

最后修改时间:2022-12-15 18:15

标示线是用来标记坐标轴上特殊值的一条直线,在绘图区内绘制一条自定义的线。标示线总是垂直于它属于的轴。它可单独定义在x轴或y轴,也可以同时定义在x轴和y轴。如果标示线同时定义在x轴和y轴,定义在y轴的标示线会显示在前面。具体实例如下:

1、在x轴上值为3的地方画一条红色的宽度为2px的线

xAxis: { 
    // ... 省略代码
    plotLines:[{
        color:'red',            //线的颜色,定义为红色
        dashStyle:'longdashdot',//标示线的样式,默认是solid(实线),这里定义为长虚线
        value:3,                //定义在哪个值上显示标示线,这里是在x轴上刻度为3的值处垂直化一条线
        width:2                 //标示线的宽度,2px
    }]
}

2、在y轴画一条和x轴一样的红色的2px的线

yAxis: {
    // ... 省略代码
    plotLines:[{
        color:'red',           //线的颜色,定义为红色
        dashStyle:'solid',     //默认值,这里定义为实线
        value:3,               //定义在那个值上显示标示线,这里是在x轴上刻度为3的值处垂直化一条线
        width:2                //标示线的宽度,2px
    }]
}

上述定义的两个标示线效果如下图所示:

标示线(plotLines)

一、标示线的常见属性

标示线是x轴或y轴上的标记特殊刻度的线,它的属性包括了颜色,事件,id,标签,和zIndex层叠,常见属性如下表所示:

属性名描述默认值
color标示线的颜色null
dashStyle标示线的线条样式,默认是solid,即直线型,更多下面详细说明'solid'
events标示线的事件,详细事件下文详解null
id定义标示线,在Axis.removePlotLine中定义去除那条标示线null
value在坐标轴上显示的位置null
label标示线的文字标签,用来描述标示线null   
width标示线的宽度null    
zIndex层叠,标示线在图表中显示的层叠级别,值越大,显示越向前,默认标示线显示在数据线之后null

二、常用属性详解

1、Labels:标签

标签是对标示线的一个文字说明,文本值默认会显示在标示线的上部。给标示线添加一个标签的实例代码如下:

plotLines:[{
    // ..., 省略代码
    label:{
        text:'我是标示线的标签',     //标签的内容
        align:'left',                //标签的水平位置,水平居左,默认是水平居中center
        x:10                         //标签相对于被定位的位置水平偏移的像素,重新定位,水平居左10px
    }
}]

2、dashStyle :线条样式

线条有直线型、虚线型等,所有的线条及样式如下图所示:

Highcharts线条样式

上图所示的线条样式同样适用于Highcharts图表中所有线条

3、Events:事件

Highcharts为标示线提供了很多相关事件,详细描述如下

plotLines:[{
    //..., 省略代码
    events:{
        click:function(){
             //当标示线被单击时,触发的事件
        },
        mouseover:function(){
            //当标示线被鼠标悬停时,触发的事件
        },

        mouseout:function(){
            //当标示线被鼠标移出时,触发的事件
        },

        mousemove:function(){
            //当标示线被鼠标移动(时,触发的事件
        }
    }
}]

更多关于标题的属性请参考API文档:xAxis plotLines 、 yAxis plotLines

二、动态增加或删除标示线

Highcharts提供了相应的函数方便在图表绘制完毕后对标示线动态的增加或删除操作。

1、增加标示线

可以通过 addPlotLine() 函数增加标示线,该函数的构造如下

addPlotLine (Object options) ,其中options是一个 plotline 对象,实例代码如下:

var chart = new Highcharts.Chart();    // Highcharts构造函数
chart.xAxis[0].addPlotLine({           //在x轴上增加
    value:2,                           //在值为2的地方
    width:2,                           //标示线的宽度为2px
    color: '#FCFFC5',                  //标示线的颜色
    id: 'plot-line-1'                  //标示线的id,在删除该标示线的时候需要该id标示
});

2、删除标示线

Highcharts提供函数 removePlotLine() 供动态删除标示线,removePlotLine ()函数结构如下: removePlotLine (id)  

参数说明:

  • id:标示线的id,不存在该id时,该函数式无效的

实例代码:

var chart = new Highcharts.Chart();           // Highcharts构造函数
chart.xAxis[0].removePlotLine('plot-line-1'); //把id为plot-line-1的标示线删除

通过上述的两个方法,addPlotLine()和removePlotLine(),可以动态的实现增加和删除标示线;需要注意的是,需要进行删除的标示线,在新增或初始化的时候需要给其id属性赋唯一的值,如果不存在id,removePlotLine() 会失效。

在线试一试

3、 仪表图和雷达图中的标示线

在仪表图(gauge)和雷达图(polar)中,定义在x轴上的标示线将会显示一条直线,定义在y轴上的标示线将会显示一个同心圆。

版权声明

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

标题:标示线 | Highcharts 使用教程

链接:https://www.hcharts.cn/docs/basic-plotLines/

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

    订阅更新

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

    选择服务类型

    技术问题

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

    商业授权

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

    图表定制

    • 服务内容
    • VIP 专属服务

    销售服务:    技术服务:

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

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

    重要通知!

    尊敬的用户您好:
    由于域名备案调整,我们将于 2023-01-01 ~ 2023-01-07 日陆续停用 highcharts.com.cn 域名,受影响的网站及域名如下:

    网站或服务名称域名替代的网站
    主站www.highcharts.com.cnwww.hcharts.cn
    静态资源服务/CDNcdn.highcharts.com.cn
    code.highcharts.com.cn
    code.hcharts.cn
    img.highcharts.com.cnimg.hcharts.cn
    API 文档api.highcharts.com.cnapi.hcharts.cn
    导出服务export.highcharts.com.cnexport.hcharts.cn

    以上网站服务及 highcharts.com.cn 域名下的网站将于 2023-01-08 日全部下线,未来一段时间将不可访问,后续我们将上线新的网站。

    如果您的应用中有使用到相关服务,请抓紧时间对链接进行调整(特别是静态资源/CDN 服务的链接),以免影响您的网站或应用的正常运行,由此给您带来的不便,敬请谅解。

    如需帮助,请及时与我们联系:0571-86208605 / 18106595564(微信)。

    简数科技 2022-12-22