最后修改时间: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为不透明。
渐变颜色包括线性渐变和径向渐变。
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 及以下的浏览器,渐变对线条无效,也就是线条的颜色是渐变数组的第一个颜色值。
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
本教程仅用于学习、研究和交流目的,欢迎非商业转载。转载请注明出处及完整的链接。
订阅更新
尊敬的用户您好:
由于域名备案调整,我们将于 2023-01-01 ~ 2023-01-07 日陆续停用 highcharts.com.cn 域名,受影响的网站及域名如下:
网站或服务名称 | 域名 | 替代的网站 |
---|---|---|
主站 | www.highcharts.com.cn | www.hcharts.cn |
静态资源服务/CDN | cdn.highcharts.com.cn code.highcharts.com.cn | code.hcharts.cn |
img.highcharts.com.cn | img.hcharts.cn | |
API 文档 | api.highcharts.com.cn | api.hcharts.cn |
导出服务 | export.highcharts.com.cn | export.hcharts.cn |
以上网站服务及 highcharts.com.cn 域名下的网站将于 2023-01-08 日全部下线,未来一段时间将不可访问,后续我们将上线新的网站。
如果您的应用中有使用到相关服务,请抓紧时间对链接进行调整(特别是静态资源/CDN 服务的链接),以免影响您的网站或应用的正常运行,由此给您带来的不便,敬请谅解。
如需帮助,请及时与我们联系:0571-86208605 / 18106595564(微信)。
简数科技 2022-12-22