颜色

优质

小牛编辑

134浏览

2023-12-01

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 来指定该路径。

在线试一试