我目前正在使用 Highcharts 创建仪表图表，我想对 y 轴上的小刻度线应用渐变效果。具体来说，我希望小刻度标记以某种颜色（例如黑色）开始，并逐渐过渡到仪表上的另一种颜色（例如红色）。
下面是我的 highchart 选项值：
常量选项 = {
图表： {
类型：'仪表'，
绘图背景颜色：'白色'，
绘图边框宽度：0，
绘图阴影：假，
高度：'200px'，
},
标题： {
文本：标题，
垂直对齐：'底部'，
居中对齐'，
风格： {
颜色: '#414D55',
字体大小：'11px'，
字体粗细：'粗体'
}
},
窗格：{
起始角度：-130，
结束角度：130，
中心：['50%','75%'],
尺寸：'160px'，
背景：空，
},
y 轴：{
分钟，
最大限度，
次要刻度间隔：'自动'，
小刻度长度：2，
secondaryTickPosition: '内部',
刻度间隔：刻度间隔，
刻度长度：2，
刻度宽度：0，
偏移量：-24，
标签： {
距离：-12，
风格： {
字体大小：'10px'，
}
},
线宽：0，
绘图带：绘图带
},
series: [
{
name: '',
data: [min],
tooltip: {
valueSuffix: '',
visible: false
},
dataLabels: {
enabled: false
},
// needle configuration
dial: {
radius: '70%',
backgroundColor: '#414D55',
baseWidth: 2.7,
baseLength: '0%',
rearLength: '0%',
length: 0,
zIndex: 23
},
// needle with circle
pivot: {
backgroundColor: '#414D55',
radius: 1.2,
length: 0,
zIndex: 230
},
states: {
hover: {
enabled: false,
}
}
}]
};
我想要小刻度线的渐变效果。它应该以黑色开始，以红色结束。效果应该看起来像随着不透明度的变化从黑变红。
这不能直接从 API 获得，需要添加自定义函数。
这是一个简化的图表配置，其中包含您可以基于的功能：
Highcharts.chart('container', {
chart: {
type: 'gauge',
events: {
load: function() {
let chart = this,
yAxis = chart.yAxis[0],
key, minorTick, color, ratio;
function interpolateColor(color1, color2, factor) {
let result = color1.slice();
for (let i = 0; i < 3; i++) {
result[i] = Math.round(result[i] + factor * (color2[i] - color1[i]));
}
return 'rgb(' + result.join(',') + ')';
}
for (key in yAxis.minorTicks) {
minorTick = yAxis.minorTicks[key];
ratio = minorTick.pos / yAxis.max;
color = interpolateColor([0, 0, 0], [255, 0, 0], ratio);
minorTick.mark.attr({
stroke: color
});
}
}
}
},
yAxis: {
min: 0,
max: 100,
},
series: [{
data: [80]
}]
});