Установить цвет серии Highcharts bar по значению

Question

У меня есть this plunker, где я играю с Highcharts. Мне было интересно, можно ли установить цвет панели в зависимости от значения этого бара. Сейчас у меня есть 5 баров, которые меняются на интервале от 0 до 100, и я хочу, цвета баров, чтобы отразить диапазон номеров они находятся. Как

0 < x < 25 нейтральный цвет

25 < x < 50 желтый

50 < x < 75 оранжевый

75 < x < 100 красный

Я знаком с методами серии в апи, но я действительно не что-нибудь об изменении цвета для серии. Раньше я делал это с помощью диаграммы js, но я стараюсь использовать его в highcharts, так как он используется больше.

Answer 1

Я положил это в вашей ссылке plunker после рандомизации наборов данных, в нижней части интервала, и она изменила цвет линии

$scope.chart.series[0].update({color: "red"});

Честно говоря, почему бы не написать функцию, которая срабатывает в начало интервала, который генерирует числа и соответствующий цвет на основе числа, а затем соответствующим образом устанавливает числа и цвета. Используйте массив объектов или что-то еще.

Я оставляю функцию в качестве упражнения для вас, чтобы решить.

Answer 2

В массиве серий, который возвращается через ваш вызов ajax, вы можете установить свойство «color», которое будет окрасить панель в этот цвет.

В вашей plunker я добавил следующую строку сразу после $scope.jsondata = ret;:

$scope.jsondata[0].color = "red"; 

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