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 支持纯色、透明、渐变颜色,这些颜色对图表中所有的颜色配置有效,包括但不限于 color、backgroundColor、borderColor、lineColor。

一、纯色颜色

Highcharts 支持十六进制颜色(例如 #00FF00)和 RGB 格式颜色(例如 rgb(255, 0, 0))。

另外 Highcharts 支持任何浏览器能识别的颜色格式,包括简写的十六进制颜色(例如 #000)及名字颜色(例如 red、blue)。在某些情况下,我们需要对颜色进行计算操作(例如鼠标滑过柱形时减少柱子的透明度),使用十六进制简写或名字颜色会消耗一定的性能,我们可以通过扩展 Highcharts.Color 对象来避免这个问题,具体的做法是添加名字颜色映射或名字颜色转换,实例如下:

Highcharts.Color.prototype.names = {
  white: '#ffffff',
  black: '#000000',
  red: '#00ffff'
}

使用 RGBColor 库进行转换

Highcharts.Color.prototype.parsers.push({
  regex: /^[a-z]+$/,
    parse: function (result) {
      var rgb = new RGBColor(result[0]);
        if (rgb.ok) {
          return [rgb.r, rgb.g, rgb.b, 1]; // returns rgba to Highcharts
        }
    }
});

在线试一试

二、透明颜色

在 Highcharts 中,透明颜色是通过 rgba 的形式赋值的,例如 rgba(255, 255, 255, 1),rgba 最后一个值表示透明度,值的范围是从 0 到 1,0 表示透明,1为不透明。

三、渐变颜色

渐变颜色包括线性渐变和径向渐变。

1、线性渐变

Highcharts 中是线性渐变同 SVG 的语法,实例如下:

color: {
  linearGradient: { x1: 0, x2: 0, y1: 0, y2: 1 },
  stops: [
      [0, '#003399'],
      [1, '#3366AA']
  ]
}

参数解释:

  • linearGradient:渐变的起始点,其中 (x1, y1) 为起始点,(x2, y2) 结束点,其中 (0, 0) 点为图形的左上角,(1, 1) 为图形的右下角

  • stops:渐变位置及颜色数组,每个数组里的第一个值为渐变位置,0 表示渐变的起点,1 为渐变终点;数组里的第二个值为渐变色,该颜色同样支持 rgba 格式,但是在 IE8 及以下版本的浏览器中,只有第一个和最后一个颜色的透明度有效

在现代主流浏览器中(支持 SVG),渐变颜色可以对线条(strokes 属性)及背景(fill属性)有效;对于 IE8 及以下的浏览器,渐变对线条无效,也就是线条的颜色是渐变数组的第一个颜色值。

在线试一试

2、径向渐变

Highcharts 2.3 开始支持径向渐变,其语法和 SVG 径向渐变类似,示例如下:

color: {
  radialGradient: { cx: 0.5, cy: 0.5, r: 0.5 },
  stops: [
     [0, '#003399'],
     [1, '#3366AA']
  ]
}

参数解释:

  • radialGradient:包含渐变中心点及半径的对象。其中 cx 和 cy 表示相对图形水平和竖直的位置,0 和 1 表示起点,0.5 为中心点;r 为渐变半径,其值为相对于图形直径的大小

  • stops:渐变位置及颜色数组,同线性渐变

当在饼图扇区、仪表图背景、极地图中使用径向渐变时,改渐变是相对整个圆形,而不是指定的图形。

在 IE8 及以下的浏览器原生并不支持径向渐变,我们通过加载包含图案的图片来模拟实现了径向渐变效果,该图片默认是从我们的 CDN 服务器加载,可以通过参数 global.VMLRadialGradientURL 来指定该路径。

在线试一试 jshare.com.cn

版权声明

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

标题:颜色 | Highcharts 使用教程

链接:https://www.hcharts.cn/docs/colors/

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