Highcharts Sunburst 图表 - colorVariation.to 值的范围是多少？答案

【问题标题】：Highcharts Sunburst chart - What is the range of colorVariation.to values?Highcharts Sunburst 图表 - colorVariation.to 值的范围是多少？
【发布时间】：2017-12-07 10:08:00
【问题描述】：

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 值。我想知道我应该允许什么范围的值？

【问题讨论】：

标签： javascript highcharts sunburst-diagram

【解决方案1】：

我认为理解colorVariation.to如何工作的关键是分析两个核心功能：

1. variation 来自 sunburst.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;
        }

2。 brighten 来自 highcharts.src.js

        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)（红色）。对于第一个兄弟，索引等于variation 函数中的0。所以传递给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 - 这种情况中colorVariation 的最大值。所有高于此的值都将与 2 一样工作。

colorVariation 的值可以是负数 - 它会使颜色变暗而不是变亮。

【讨论】：

感谢@Kamil Kulig