Как установить максимальное и минимальное значение цвета старших карт?

Question

Я пытаюсь установить цвет максимума и минимума в старших графиках. К сожалению, я не могу это сделать. Я много искал, но не смог получить ответ. Из данных я буду знать максимальное и минимальное значение каждой строки, и я хочу установить цвет для минимального и максимального значений каждой строки, используя высокие диаграммы.

Это мой текущий вывод:

но я хочу это:

Вот мой код:

Highcharts.SparkLine = function (a, b, c) {
var hasRenderToArg = typeof a === 'string' || a.nodeName,
    options = arguments[hasRenderToArg ? 1 : 0],
    defaultOptions = {
        chart: {
            renderTo: (options.chart && options.chart.renderTo) || this,
            backgroundColor: null,
            borderWidth: 0,
            type: 'area',
            margin: [2, 0, 2, 0],
            width: 120,
            height: 20,
            style: {
                overflow: 'visible'
            },

            // small optimalization, saves 1-2 ms each sparkline
            skipClone: true
        },
        title: {
            text: ''
        },
        credits: {
            enabled: false
        },
        xAxis: {
            labels: {
                enabled: false
            },
            title: {
                text: null
            },
            startOnTick: false,
            endOnTick: false,
            tickPositions: []
        },
        yAxis: {
            endOnTick: false,
            startOnTick: false,
            labels: {
                enabled: false
            },
            title: {
                text: null
            },
            tickPositions: [0]
        },
        legend: {
            enabled: false
        },
        tooltip: {
            hideDelay: 0,
            outside: true,
            shared: true
        },
        plotOptions: {
            series: {
                animation: false,
                lineWidth: 1,
                shadow: false,
                states: {
                    hover: {
                        lineWidth: 1
                    }
                },
                marker: {
                    radius: 1,
                    states: {
                        hover: {
                            radius: 2
                        }
                    }
                },
                fillOpacity: 0.25
            },
            column: {
                negativeColor: '#910000',
                borderColor: 'silver'
            }
        }
    };

options = Highcharts.merge(defaultOptions, options);

return hasRenderToArg ?
    new Highcharts.Chart(a, options, c) :
    new Highcharts.Chart(options, b);
};

Answer 1

Найти минимальное и максимальное число из данных и, чем цвет.

Вставьте следующий код в функцию do chunk.

                a = Math.max(...data);
                b = Math.min(...data);
                for(j = 0; j < data.length; j++) {
                    if (data[j] == a) {
                        data[j] = { y: parseInt(a), color: '#A9D08E' };
                    }
                    if (data[j] == b) {
                        data[j] = { y: parseInt(b), color: '#F4B084' };
                    }
                }

Answer 2

Используйте свойство colorAxis, вы можете определить minColor и maxColor в ColorAxis. Смотрите пример здесь https://jsfiddle.net/gh/get/library/pure/highcharts/highcharts/tree/master/samples/maps/coloraxis/mincolor-maxcolor/

colorAxis: {
        min: 1,
        max: 1000,
        type: 'logarithmic',
        minColor: '#efecf3',
        maxColor: '#990041'
    },