如何设置高图的最大和最小值颜色？

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属性，可以在ColorAxis中定义minColor和maxColor。在此处查看示例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'
    },