首页 文章

Highcharts Sunburst图表 - colorVariation.to值的范围是多少?

提问于
浏览
1

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 回答

  • 1

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

    1. variation from 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 from 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;
            },
    

    Example:

    不要以为我们在同一级别上有两个兄弟姐妹,他们的 colorVariation.to0,5 . 此级别的基色为 rgba(255,0,0,1) (红色) . 对于第一个兄弟,索引等于 variation 函数中的 0 . 因此传递给 brighten 函数的值是 00.5 * (0 / 2) ) . 下一步是将此值乘以 255 (最大亮度级别)并将其添加到除 a 之外的每个颜色分量: rgb . 所以对于第一个兄弟姐妹,这个值与 colorVariation.to 相同 .

    对于第二个兄弟姐妹,阿尔法的 Value 是 0.250.5 * (1 /2) ) . pInt(alpha * 255) 将返回 63 (在这种情况下 pInt 就像 Math.floor 一样) . 所以最终的 Value 将是 rgba(255, 63, 63) . 高于 2550 的值由两个 if 语句更正 .


    在这种情况下 Math.min(r,g,b)0 ,所以如果我们想要获得最后一个叶子的最大亮度 alpha 应该等于 1 (所有分量(r,b,g)必须具有 255 的值) .

    如果我们从 variation 函数求解方程: colorVariation.to * (1 / 2) = 1 ,我们将获得 2 - this casecolorVariation 的最大值 . 高于此值的所有值将与2为高度相同 .

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

相关问题