highcharts.js - динамический цвет метки - PullRequest
Новая
       20

highcharts.js - динамический цвет метки

0 голосов
/ 13 ноября 2018

Можно ли изменить цвет этикетки при изменении цвета индикатора?

Вот моя js fiddle - необходимо раскрасить число так же, как и датчик: http://jsfiddle.net/e76o9otk/735/

dataLabels: {
            format: '<div style="margin-top: -15.5px; text-align:center"><span style="font-size:10px;color:' +
                Highcharts.getOptions().colors[0] + '">{y}</span><br/>' +
                   '</div>'
        }

1 Ответ

0 голосов
/ 13 ноября 2018

Используйте функцию обратного вызова formatter, чтобы включить логику в текст метки следующим образом: 

dataLabels: {
  formatter: function() {
    let color = ''
    if (this.y > 50) {
      color = '#55BF3B' //green
    } else if (this.y > 10) {
      color = '#DDDF0D' //yellow
    } else {
      color = '#DF5353' //red
    }
    return '<div style="margin-top: -15.5px; text-align:center"><span style="font-size:10px;color:' + color + '">' + this.y + '</span><br/>' + '</div>'
    },
  }

Пример работы JSFiddle: http://jsfiddle.net/ewolden/x6j1ywdb/

Если вы хотите, чтобы dataLabel был градиентом, вы можете реализовать (или заимствовать) функцию градиента, такую ​​как эта: Программно осветлить или затемнить шестнадцатеричный цвет (или rgb и смешать цвета)

Пример работы JSFiddle: (с градиентными метками данных): http://jsfiddle.net/ewolden/x6j1ywdb/12/

...