HighCharts Создать градиент, уменьшающий цвет, чтобы размыть для каждого значения на гистограмме

Question

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

это мой образец изображения

любой может помочь мне

Answer 1

Вы можете использовать colorAxis из серии heatmap, обернув прототип Colum:

var columnProto = Highcharts.seriesTypes.column.prototype;

columnProto.axisTypes = ['xAxis', 'yAxis', 'colorAxis'];
columnProto.optionalAxis = 'colorAxis';
columnProto.colorKey = 'y';

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

    Highcharts.seriesTypes.heatmap.prototype.translateColors.call(this);
});

Highcharts.chart('container', {
    series: [{
        type: 'bar',
        data: [1, 2, 3, 4, 5, 6, 7, 8, 9]
    }],
    colorAxis: {
        minColor: '#c6e48b',
        maxColor: '#196127',
        min: 1,
        max: 9
    }
});

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

APIСправка: https://api.highcharts.com/highcharts/colorAxis