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

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

это моя пробная картинка

кто-нибудь может мне помочь

highcharts

29.05.2019 05:58

Стоит ли изучать PHP в 2023-2024 годах?

Привет всем, сегодня я хочу высказать свои соображения по поводу вопроса, который я уже много раз получал в своем сообществе: "Стоит ли изучать PHP в...

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Приемы CSS-макетирования - floats и Flexbox

Здравствуйте, друзья-студенты! Готовы совершенствовать свои навыки веб-дизайна? Сегодня в нашем путешествии мы рассмотрим приемы CSS-верстки - в...

Тестирование функциональных ngrx-эффектов в Angular 16 с помощью Jest

В системе управления состояниями ngrx, совместимой с Angular 16, появились функциональные эффекты. Это здорово и делает код определенно легче для...

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Пользовательский скаляр GraphQL

Листовые узлы системы типов GraphQL называются скалярами. Достигнув скалярного типа, невозможно спуститься дальше по иерархии типов. Скалярный тип...

Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

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

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

спасибо @ppotaczek, но мои данные около тысячи, жарко, чтобы установить максимальную и минимальную базу данных?

— 30.05.2019 19:34

Привет @RAVI BANGKIT NUR ZIKRILLAH, Вам необходимо установить свойства min и max в соответствии с вашими данными в объекте конфигурации colorAxis: jsfiddle.net/BlackLabel/1zj79odv

— 31.05.2019 10:51

29.05.2019 11:13