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
收起菜单 教程目录

坐标轴

最后修改时间:2020-11-20 11:32

笛卡尔图表(普通的二维数据图)都有X轴和Y轴,默认情况下,x轴显示在图表的底部,y轴显示在左侧(多个y轴时可以是显示在左右两侧),通过设置chart.inverted = true 可以让x,y轴显示位置对调。下图为图表中坐标轴组成部分

图1:图表坐标轴组成部分

一、坐标轴组成部分

1、坐标轴标题

坐标轴标题。默认情况下,x轴为null(也就是没有title),y轴为'Value',设置坐标轴标题的代码如下:

xAxis:{
   title:{
       text:'x轴标题'
   }
}
yAxis:{
   title:{
       text:'y轴标题'
   }
}

更多关于Axis Title属性请查看API文档相关内容 xAxis.title、yAxis.title。

2、坐标轴刻度标签

坐标轴标签(分类)。Labels常用属性有enabled、formatter、step、staggerLines

1)enabled

是否启用Labels。x,y轴默认值都是true,如果想禁用(或不显示)Labels,设置该属性为false即可。

2)Formatter

标签格式化函数。默认实现是:

formatter:function(){
    return this.value;
}

this.value代码坐标轴上当前点的值(也就是x轴当前点的x值,y轴上当前点的y值),除了value变量外,还有axis、chart、isFirst、isLast可用。例如调用this.isFirst的结果如下图所示

图2:自定义坐标轴标签格式化 1

另外一个例子,实现更高级的自定义格式化函数,截图如下:

图3:自定义坐标轴标签格式化 2

实现代码如下:

yAxis: {        
  labels: {
    formatter:function(){
      if(this.value <=100) { 
        return "第一等级("+this.value+")";
      }else if(this.value >100 && this.value <=200) { 
        return "第二等级("+this.value+")"; 
      }else { 
        return "第三等级("+this.value+")";
      }
    }
  }
}

3)Step

Labels显示间隔,数据类型为number(或int)。下图说明了step的用法和作用

图4:Y轴坐标轴标签步进

4)staggerLines

水平轴 Labels 显示行数。(该属性只对水平轴有效)当 Labels 内容过多时,可以通过该属性控制显示的行数。和该属性相关的还有maxStaggerLines属性。

更多关于 Labels 的属性请查看API文档 xAxis.labels、yAxis.labels

3、坐标轴刻度

Tick为坐标轴刻度。默认情况下x轴刻度高(tickLength属性)为5px,宽为1px;y轴宽为0px(也就是不显示刻度)。Tick相关的属性主要有tickLength、tickWidth、tickColor、tickInterval、tickmarkPlacement。

1)tickLength、tickWidth、tickColor

分别代表刻度线的长度、宽度、颜色。

2)tickInterval

刻度间隔。其作用和Labels.step类似,就是不显示过多的x轴标签内容,不同的是,tickInterval是真正意义上的调整刻度,而Labels.step只是调整Labels显示间隔。所以在实际应用中,tickInterval用的多。

针对不同数据类型的坐标轴有不同的默认值。对于线性数据和Datetime类型数据,其默认值是tickPixelInterval值,对于Categorty表示间隔一个category。

3)tickmarkPlacement

刻度线对齐方式,有between和on可选,默认是between。设置为on后的变化如下图:

图5:坐标轴刻度放置位置

更多关于Tick的属性请查看API文档。

4、坐标轴网格线

坐标轴网格线。默认情况下,x轴网格线宽度为0,y轴网格线宽度为1px。网格线共有三个属性可设置,分别是: gridLineWidth、gridLineColor、gridLineDashStyle

1)gridLineWidth

网格线宽度。x轴默认为0,y轴默认为1px。

2)gridLineColor

网格线颜色。默认为:#C0C0C0。

3)gridLineDashStyle

网格线线条样式。和Css border-style类似,常用的有:Solid、Dot、Dash。

下图为自定义x和y轴的gridLines效果图

图6:自定义网格线

4、多轴

多个轴。在Highcharts中, 坐标可以是多个,最常见的是多个y轴。多轴存在时,Axis是一个数组,而在赋值时,通过Axis数组的下标与数据关联。如下图所示:

图7:多坐标轴

总结如下:

  • Series中设置每个轴值时,用轴数组下标关联(注意下标是从 0 开始的)
  • 设置opposite: true表示该轴位置反转,即为y轴时显示在右侧,为x轴时显示在顶部(和正常情况下x轴在下,y轴左构成反转)。
  • 在Series中可以设置该轴的类型,多个轴不同的类型(例如:type:'spline'),就构成了多种图表并存的混合图。

更多关于多轴、混合图请查看在线演示平台的 两个(Y)轴的混合图、多个(Y)轴的混合图。

二、坐标轴类型

坐标轴中,可以通过Type指定坐标轴类型,有linear、logarithmic、datetime、category可选,默认是:linear。指定类型的实例代码如下:

// The types are 'linear', 'logarithmic' and 'datetime'
yAxis: {
    type: 'linear',
}

// Categories are set by using an array
xAxis: {
    categories: ['Apples', 'Bananas', 'Oranges']
}

1、线性轴

线性轴。默认类型,x轴按照 Axis.tickInterval 值增长,y轴默认是自适应。

2、对数轴

对数轴。按照数学中的对数增长,例如1,2,4,8… 用的不多,主要用于对数图表,实例请查看在线演示平台的 对数直线图。

3、时间轴

时间轴。时间使用和Javascript 日期对象一样,即用一个距1970年1月1日0时0分0秒的毫秒数表示时间,也就是时间戳。更多Javascript 日期对象请阅读 W3C school 相关内容。

Highcharts有很多时间格式化函数,列举如下:

1)Date.getTime()

获取当前时间戳。实例用法如下:

time = Date.getTime();   //time = 1384442746960 (ms)  当前时间为 2013-11-14 23:25:46

2)Date.UTC(year,month,day,hours,minutes,seconds,millisec)

通过UTC方式获取指定时间的毫秒数,例如获取 2013-11-14 00:00:00的毫秒数代码如下:

time = Date.UTC(2013,11,14,0,0,0,0);  // time = 1386979200000 (ms);

3)Highcharts.dateFormat(String format)

Highcharts时间格式化函数,同 PHP格式化函数。具体用法参考API文档 Highcharts.dateFormat() ,当然,在本教程的《函数使用》章节中具体讲解。

4、category

数组轴。用的最多也最简单,这里就不多说,更多请查看 在线演示平台 例子。

三、动态更新及其他相关属性

1、动态更新

坐标轴可以通过函数实现动态更新,在图表绘制完毕后,你可以任意的对你更改而不需要重绘。所有相关函数都在 Axis 中,本教程将在《函数使用》章节具体讲解。

2、其他相关属性

出了Axis中的属性可以对坐标轴有影响外,还有其他属性也可以对其起作用。列举如下:

1)inverted

图表反转,即 Chart.inverted,当其值设置为true时,x轴和y轴显示的位置对调。

在线试一试

2)reversed

轴反转。和 inverted 不同的是,轴反转是将坐标轴刻度反转而不是 x、y轴对调。例如 y 轴反转的结果是 y 轴是从最大的值开始的,最小值反而在最下方。

在线试一试

3)opposite

轴倒置。主要控制坐标轴左右或上下显示。

在线试一试

4)allowDecimals

控制数轴是否显示小数。

5)min、max

控制数轴的最小值和最大值。

注意:控制allowDecimals、min、max 属性你可以轻松控制数轴的显示范围等(这也是很常见的问题)

6)plotLines

标示线,详见:标示线教程

7)plotBands

标示区域,详见:标示区域教程

版权声明

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

标题:坐标轴 | Highcharts 使用教程

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

   上一篇 下一篇   
  目录
    简数科技微信,同步更新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