Highcharts API参考说明了colorVariation.to是应用于最后一个同级的颜色变化的最终值。
演示示例：http://jsfiddle.net/gh/get/library/pure/highcharts/highcharts/tree/master/samples/highcharts/demo/sunburst/
levels: [{
level: 2,
colorByPoint: true,
dataLabels: {
rotationMode: 'parallel'
}
},
{
level: 3,
colorVariation: {
key: 'brightness',
to: -0.5
}
}, {
level: 4,
colorVariation: {
key: 'brightness',
to: 0.5
}
}]
当我将级别3设置为colorVariation.To = 0时，该级别上的所有同级都以相同的颜色显示。参考：http://jsfiddle.net/hqkk8ut5/
levels: [{
level: 2,
colorByPoint: true,
dataLabels: {
rotationMode: 'parallel'
}
},
{
level: 3,
colorVariation: {
key: 'brightness',
to: 0
}
}, {
level: 4,
colorVariation: {
key: 'brightness',
to: 0.5
}
}]
在我的应用程序中，我想配置colorVariation.to值。
我想知道我应该允许什么值范围？
最佳答案
我认为了解colorVariation.to工作原理的关键是通过分析两个核心功能：
1.来自sunburst.src.js的variation
function variation(color) {
var colorVariation = level && level.colorVariation;
if (colorVariation) {
if (colorVariation.key === 'brightness') {
return H.color(color).brighten(
colorVariation.to * (index / siblings)
).get();
}
}
return color;
}
2. highcharts.src.js中的
brighten brighten: function(alpha) {
var i,
rgba = this.rgba;
if (this.stops) {
each(this.stops, function(stop) {
stop.brighten(alpha);
});
} else if (isNumber(alpha) && alpha !== 0) {
for (i = 0; i < 3; i++) {
rgba[i] += pInt(alpha * 255);
if (rgba[i] < 0) {
rgba[i] = 0;
}
if (rgba[i] > 255) {
rgba[i] = 255;
}
}
}
return this;
},
例：
Les不假定我们有两个同级兄弟姐妹，而他们的
colorVariation.to是0,5。该级别的基础颜色为rgba(255,0,0,1)（红色）。对于第一个同级，在0函数中索引等于variation。因此，传递给brighten函数的值为0（0.5 * (0 / 2)）。下一步是将该值乘以255（最大亮度），并将其添加到除a，r，g和b之外的每个颜色分量中。因此，对于第一个同级，该值与colorVariation.to相同。对于第二个同级，alfa的值为
0.25（0.5 * (1 /2)）。 pInt(alpha * 255)将返回63（在这种情况下，pInt的作用与Math.floor相同）。因此，最终值将为rgba(255, 63, 63)。高于255和0的值由两个if语句更正。在这种情况下，
Math.min(r,g,b)是0，因此如果我们要获得最后一片叶子的最大亮度，则alpha应该等于1（所有分量（r，b，g）的值都必须）。如果我们从
255函数求解方程：variation我们将得到
colorVariation.to * (1 / 2) = 1-在这种情况下2的最大值。所有高于此值的值都将与2相同。colorVariation的值可以是负数-它将使颜色变深而不是变亮。