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
}
}]
当我为level 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值 . 我想知道我应该允许什么范围的值?
1 回答
我认为理解
colorVariation.to
如何工作的关键是分析两个核心功能:1. variation from sunburst.src.js
2. brighten from highcharts.src.js
Example:
不要以为我们在同一级别上有两个兄弟姐妹,他们的
colorVariation.to
是0,5
. 此级别的基色为rgba(255,0,0,1)
(红色) . 对于第一个兄弟,索引等于variation
函数中的0
. 因此传递给brighten
函数的值是0
(0.5 * (0 / 2)
) . 下一步是将此值乘以255
(最大亮度级别)并将其添加到除 a 之外的每个颜色分量: r , g 和 b . 所以对于第一个兄弟姐妹,这个值与colorVariation.to
相同 .对于第二个兄弟姐妹,阿尔法的 Value 是
0.25
(0.5 * (1 /2)
) .pInt(alpha * 255)
将返回63
(在这种情况下pInt
就像Math.floor
一样) . 所以最终的 Value 将是 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
- this case 中colorVariation
的最大值 . 高于此值的所有值将与2为高度相同 .colorVariation
的值可以是负数 - 它会使颜色更暗而不是更亮 .