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值。 我想知道我应该允许哪些值?
答案 0 :(得分:1)
我认为理解preg_replace
如何运作的关键是分析两个核心功能:
<强> 1。来自sunburst.src.js的colorVariation.to
variation
<强> 2。来自highcharts.src.js的 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;
}
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;
},
为colorVariation.to
。此级别的基色为0,5
(红色)。对于第一个兄弟,索引等于rgba(255,0,0,1)
函数中的0
。因此,传递给variation
函数的值为brighten
(0
)。下一步是将此值乘以0.5 * (0 / 2)
(最高亮度级别)并将其添加到除 a 之外的每个颜色分量: r , g < / strong>和 b 。因此,对于第一个兄弟姐妹,此值与255
保持一致。
对于第二个兄弟,alfa的值是colorVariation.to
(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
(所有组件(r) ,b,g)必须具有1
)的值。
如果我们从255
函数求解方程:variation
我们将获得colorVariation.to * (1 / 2) = 1
- 此案例中2
的最大值。高于此值的所有值都将与2相同。
colorVariation
的值可以是负数 - 它会使颜色变暗而不是更亮。