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

时间:2017-12-07 10:08:01

标签: javascript highcharts sunburst-diagram

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 个答案:

答案 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函数的值为brighten0)。下一步是将此值乘以0.5 * (0 / 2)(最高亮度级别)并将其添加到除 a 之外的每个颜色分量: r g < / strong>和 b 。因此,对于第一个兄弟姐妹,此值与255保持一致。

对于第二个兄弟,alfa的值是colorVariation.to0.25)。 0.5 * (1 /2)将返回pInt(alpha * 255)63就像pInt一样工作。因此,最终值将为 Math.floor 。高于rgba(255, 63, 63)255的值会被两个0语句更正。

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

如果我们从255函数求解方程:variation 我们将获得colorVariation.to * (1 / 2) = 1 - 此案例2的最大值。高于此值的所有值都将与2相同。

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