Есть ли способ реализовать оттенки цветов в древовидной карте для потомков конкретного родителя

Question

У меня есть jsfiddle с 3 родителями (банан, яблоко, апельсин), и когда карта дерева рендерит, например, у банана есть объекты со значениями (Рик, Энн, Сьюзан) и то, что он отображает, того же цвета (желтый в этом примере), и мойцель, например, если значение этого объекта равно 10, чтобы быть желтым без размытия до желтого, и если значение этого объекта равно 1, чтобы быть почти белым с оттенком желтого.Есть ли алгоритм, который обрабатывает это?Я совершенно уверен, что это уже известная просьба людей.

Пока мне удалось создать в одной скрипке тех родителей с детьми, а в других мне удалось создать разные версии оттенков этого конкретного цвета

это данные родителей и детей

{
            id: 'A',
            name: 'Apples',
            color: "#EC2500"
        }, {
            id: 'B',
            name: 'Bananas',
            color: "#ECE100"
        }, {
            id: 'O',
            name: 'Oranges',
            color: '#EC9800'
        }, {
            name: 'Anne',
            parent: 'A',
            value: 5
        }, {
            name: 'Rick',
            parent: 'A',
            value: 3
        }, {
            name: 'Peter',
            parent: 'A',
            value: 4
        }, {
            name: 'Anne',
            parent: 'B',
            value: 4
        }

и это результат, который я хотел бы реализовать в скрипке выше с различными оттенками желтого, красного иоранжевый

{
    colorAxis: {
        minColor: '#FFFFFF',
        maxColor: '#FFFF33'
        // maxColor:Highcharts.getOptions().colors[0]
    },
    series: [{
        type: 'treemap',
        layoutAlgorithm: 'squarified',
        data: [{
            name: 'Rick',
            value: 6,
            colorValue: 1
        }, {
            name: 'Anne',
            value: 6,
            colorValue: 2
        }, {
            name: 'Susane',
            value: 4,
            colorValue: 3
        }, {
            name: 'Peter',
            value: 3,
            colorValue: 4
        }, {
            name: 'E',
            value: 2,
            colorValue: 5
        }, {
            name: 'F',
            value: 2,
            colorValue: 6
        }, {
            name: 'G',
            value: 1,
            colorValue: 7
        }]
    }],
    title: {
        text: 'Highcharts Treemap'
    }
}

Это скрипка с оттенками желтого https://jsfiddle.net/bpc7fd49/1/ и это скрипка, где я пытаюсь реализовать эти оттенки вместо того, чтобы иметь только одинверсия желто-красного или оранжевого цвета https://jsfiddle.net/7z5ngLva/3/

Answer 1

Если вы не хотите использовать форму colorAxis heatmap, вы можете рассчитать цвета для точек, используя внутренний метод tweenTo:

(function(H) {
    var treemapProto = Highcharts.seriesTypes.treemap.prototype,
        minVal,
        maxVal,
        values,
        children;

    Highcharts.wrap(treemapProto, 'translate', function(proceed) {
        proceed.apply(this, Array.prototype.slice.call(arguments, 1));
        this.values = {};

        this.points.forEach(function(point) {
            children = point.node.children;

            if (children.length) {
                minVal = null;
                maxVal = null;

                children.forEach(function(child) {
                    minVal = minVal ? Math.min(minVal, child.val) : child.val;
                    maxVal = maxVal ? Math.max(maxVal, child.val) : child.val;
                });

                this.values[point.id] = {
                    minVal: minVal,
                    maxVal: maxVal,
                    minColor: point.minColor,
                    maxColor: point.maxColor
                };
            } else {
                values = this.values[point.parent];

                point.color = H.color(values.minColor).tweenTo(
                    H.color(values.maxColor),
                    (point.value - values.minVal) / (values.maxVal - values.minVal)
                );
            }
        }, this);
    });
})(Highcharts);

Демонстрационная версия: https://jsfiddle.net/BlackLabel/b1k5whcv/

Документы: https://www.highcharts.com/docs/extending-highcharts

Answer 2

Мне удалось найти ответ

stops = [
            [0.25, '#EC2500'],
            [0.5, '#ECE100'],
            [0.75, '#EC9800'],
            [1, '#9EDE00']
        ],
        distance = stops[1][0] - stops[0][0],
        modifiedStops = [];

    $.each(stops, function (i, stop) {
        modifiedStops.push([stop[0] - distance - 0.001, '#ffffff']);
        modifiedStops.push(stop);
        modifiedStops.push([stop[0] + 0.001, stop[1]]);
    });

вся скрипка http://jsfiddle.net/4egy85fw/