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:34

在 Highcharts 中,所有的布局及样式均可通过配置来自定义。

一、布局及位置

Highcharts 图表中大部分元素都可以通过 x 和 y 参数设置偏移量来改变其位置,偏移是相对其水平对齐和竖直对齐方式的;水平对齐可用的值有 “left”、“right” 和 “center”,默认是 “left”;竖直对齐可用在值有 “top”、“bottom” 和 “middle”。

1、图表布局

Highcharts 图表在网页中的位置和布局是由 CSS 控制图表容器 div 来实现的,图表的宽度和高度可以是指定容器 div 的宽度和高度,也可以直接通过图表配置 chart.width 和 chart.height 来指定。

图表绘图区(plotArea)是指包含在坐标轴内,用于绘制数据列的区域。绘图区的定位由两个配置集:外边距(margin,包括 marginLeft、marginRight等)和内边距(spacing,包含 spacingLeft、spacingRight 等)来决定。外边距指的是绘图区与图表的外边距,内边距指的是图表元素(包括标题、坐标轴等)与图表的内边距。 默认情况下,外边距值为 null,即自动计算外边距,外边距只用于旧版本的图表或在多个图表中需要对齐绘图区的情况下,另外外边距配置会覆盖相对应的内边距配置。

图7-1 Highcharts 绘图区及边距示意图

chart: {
    // 指定内边距,下面的四个配置可以用 spacing: [10, 10, 15, 10] 来代替
    spacingBottom: 15,
    spacingTop: 10,
    spacingLeft: 10,
    spacingRight: 10,

    // 指定外边距
    margin: null,

    // 指定图表大小
    width: null,
    height: null
}

在线试一试

2、版权标签

版权标签可以通过 position 配置该进行定位,示例代码如下:

credits: {
  position: {
    align: 'left',
    verticalAlign: 'bottom',
    x: 10,
    y: -10
  }
}

更多详情请参考 版权标签教程 及 API 文档

3、坐标轴标签及标题

坐标轴的标签可以通过 align、x、y 来改变其位置,示例代码如下:

xAxis: {
  labels: {
    align: 'right',
    x: -10,
    y: 0
  }
}

另外坐标轴标签还可以将其进行旋转,更多样式可以通过 labels.style 来控制,详细请参考 API 文档。

坐标轴的标题可以通过 align、x、y、offset、margin 等参数来定位,示例代码如下:

yAxis: {
    title: {
        align: 'high',     // 注意坐标轴标题的对齐方式是相对于值来说的
        margin: 10,
        offset: 10,
        x: -10,
        y: 0
    }
}

更多坐标轴标题相关配置参考 API 文档。

4、图例

默认情况下,图例居中显示在图表下方,可以通过 align、verticalAlign、x、y 来改变其位置,另外设置 floating 为 true 时,可以将图例放置在图表的任意位置。

legend: {
  align: 'left',
  verticalAlign: 'top',
  floating: true,
  x: 0,
  y: 10
}

更多配置请参考 API 文档

5、标题及副标题

图表的标题及副标题可以通过 align、 verticalAlign、x、y 配置来控制定位,还可以设置 floating 为 true 来显示在图表中的任意位置。

图表中的标题和副标题的样式可以通过 style 配置指定或以 span 标签内联样式的形式设置。

title: {
  text: '图表标题',
  floating: true,
  align: 'right',
  x: -30,
  y: 30,
  style: {
    fontWeight: 'bold',
    fontSize: '12px'
  }
}

更多详情请参考 API 文档:标题、副标题。

6、导出按钮

导出按钮的定位和样式可以通过 navigation 及 exporting.buttons 来控制,更多详情请参考教程 图表导出模块概述。

二、线条及边框

1、线条

在 Highcharts 图表中,线条一般是通过 lineWidth、lineColor、lineDashStyle 来控制线条的宽度、颜色及样式,例如设置坐标轴的线条:

yAxis: {
  lineWidth: 1,
  lineColor: 'red',
  gridLineWidth: 1,
  gridLineColor: '#000',
  gridLineDashStyle: 'longdash'
}

其中 DashStyle 为线条样式,在 Highcharts 中所有可用的线条样式参考 这个例子。

2、边框

图表中的边框一般是由 borderWidth 和 borderColor 来控制宽度和颜色的,可以在 API 文档中搜索 “border” 关键词来查看所有边框参数,下面是给图表及绘图区添加边框的实例代码:

chart: {
  borderWidth: 1,
  borderColor: 'red',
  plotBorderWidth: 2,
  plotBorderColor: 'yellow'
}

在线试一试

三、背景

图表中元素的背景一般是通过 backgroundColor 属性来设定的,如果需要背景透明,可以将背景参数设置为 null,例如将图表的背景设置为透明的代码如下:

chart: {
  backgroundColor: null
}

在线试一试

另外对于绘图区,可以通过 plotBackgroundImage 来设定背景图片,详见 在线实例。

四、字体

图表中所有的和文字相关的元素都可以通过 style 配置来设置和文字相关的 CSS 样式,例如 xAxis.labels.style、title.style、legend.itemStryle 等。图表全局字体可以通过 chart.style 参数来指定,实例如下:

Highcharts.setOptions({
  chart: {
    style: {
      fontFamily: 'serif'
    }
  }
});

在 Javascript 中,CSS 属性名用驼峰书写方式,例如 fontFamily 对应 CSS 中的 font-family、fontSize 对应 CSS 中的 font-size。

需要注意的是 style 里的属性只能是和文字相关的属性,例如 color、 textUnderline、fontSize、fontFamily、textShadow 等属性有效;其他的和文字无关的属性,例如 margin、padding 则无效。

五、阴影

在 Highcharts 图表中,很多布局元素及某些数据列可以通过 shadow 来指定阴影效果,shadow 可以设置为 true 或 false 来进行开启或关闭,还可以设置成包含 color、 offsetX、offsetY、opacity 及 width 属性的对象形式,实例代码:

shadow: {
  color: 'yellow',
  width: 10,
  offsetX: 0,
  offsetY: 0
}

在线试一试

六、动画

在 Highcharts 中,有两个地方可以控制动画效果:

  • chart.animation :全局动画,指的是动态更新、重绘、图表元素显示或隐藏时的动画效果

  • plotOptions.series.animation:数据列初始化动画,指的是只在数据列初始化显示时的动画,动画完毕后不再执行

注意:上述两个动画配置是相互独立的,即他们的配置不能互相生效,例如关闭 chart.animation 不会对 plotOpitons.series.animation 有影响

动画选项的值可以是 true 或 false 来启用或关闭动画,另外还可以对象的形式,包含如下属性:

  • duration:动画时间
  • easing:动画效果名字,详细请参考 API 文档

版权声明

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

标题:图表设计及样式 | Highcharts 使用教程

链接:https://www.hcharts.cn/docs/design-and-style/

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