Highcharts 支持纯色、透明、渐变颜色，这些颜色对图表中所有的颜色配置有效，包括但不限于 color、backgroundColor、borderColor、lineColor。

一、纯色颜色

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

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

  1. Highcharts.Color.prototype.names = {
  2.   white: '#ffffff',
  3.   black: '#000000',
  4.   red: '#00ffff'
  5. }

使用 RGBColor 库进行转换

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

在线试一试

二、透明颜色

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

三、渐变颜色

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

1、线性渐变

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

  1. color: {
  2.   linearGradient: { x1: 0, x2: 0, y1: 0, y2: 1 },
  3.   stops: [
  4.       [0, '#003399'],
  5.       [1, '#3366AA']
  6.   ]
  7. }

参数解释：

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

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

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

在线试一试

2、径向渐变

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

  1. color: {
  2.   radialGradient: { cx: 0.5, cy: 0.5, r: 0.5 },
  3.   stops: [
  4.      [0, '#003399'],
  5.      [1, '#3366AA']
  6.   ]
  7. }

参数解释：

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

  • stops：渐变位置及颜色数组，同线性渐变

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

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

在线试一试

原文: https://www.hcharts.cn/docs/colors