Plotly R: изменить цвет шрифта hoverinfo в соответствии с разными цветами полосы.

У меня есть этот фрейм данных:

df2 = data.frame(value = c(9, 2, 7, 3, 6),
                 key = c('ar', 'or', 'br', 'gt', 'ko'))

И это код, который я должен сгенерировать этот сюжет

df2 %>% 
  plot_ly(x = ~key,
          y = ~value,
          type = 'bar',
          color = ~value,
          colors = c(rgb(0, 0, 0, 1), rgb(1, 0.85, 0.85, 1)),
          stroke = I('black'),
          span = I(1),
          hoverinfo = 'text',
          hovertext = ~paste0('value: ', value,
                              '\nkey: ', key)
          ) %>% 
  layout(hoverlabel = list(bordercolor = 'transparent', 
                           font = list(family = 'DM Sans', 
                                       size = 15, 
                                       color = 'white')))

Но, как показано выше, font color из hoverinfo равен белый при наведении курсора на более светлый цвет.

По сути, я хотел бы установить цвет шрифта на black when the color is lighter и white when the color is dark, как показано на этих изображениях: черный, когда светлее и белый, когда темнее.

Любые советы здесь?

Вы ссылались на это? https://plotly.com/r/hover-текст-и-форматирование/

ML_Enthu 22.04.2022 23:17

Не совсем... Когда цвет полосы темнее, я хочу, чтобы текст hoverinfo был белым, в то время как, когда цвет полосы светлее, текст должен быть черным. Я знаю, что это возможно при добавлении в сюжет разных трасс, но возможно ли без этого? Как динамичный способ

Felipe Queiroz 22.04.2022 23:41
3 метода стилизации элементов HTML
3 метода стилизации элементов HTML
Когда дело доходит до применения какого-либо стиля к нашему HTML, существует три подхода: встроенный, внутренний и внешний. Предпочтительным обычно...
Формы c голосовым вводом в React с помощью Speechly
Формы c голосовым вводом в React с помощью Speechly
Пытались ли вы когда-нибудь заполнить веб-форму в области электронной коммерции, которая требует много кликов и выбора? Вас попросят заполнить дату,...
Стилизация и валидация html-формы без использования JavaScript (только HTML/CSS)
Стилизация и валидация html-формы без использования JavaScript (только HTML/CSS)
Будучи разработчиком веб-приложений, легко впасть в заблуждение, считая, что приложение без JavaScript не имеет права на жизнь. Нам становится удобно...
Flatpickr: простой модуль календаря для вашего приложения на React
Flatpickr: простой модуль календаря для вашего приложения на React
Если вы ищете пакет для быстрой интеграции календаря с выбором даты в ваше приложения, то библиотека Flatpickr отлично справится с этой задачей....
В чем разница между Promise и Observable?
В чем разница между Promise и Observable?
Разберитесь в этом вопросе, и вы значительно повысите уровень своей компетенции.
Что такое cURL в PHP? Встроенные функции и пример GET запроса
Что такое cURL в PHP? Встроенные функции и пример GET запроса
Клиент для URL-адресов, cURL, позволяет взаимодействовать с множеством различных серверов по множеству различных протоколов с синтаксисом URL.
1
2
39
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

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

Там может быть более простой метод, чем этот, но это работает. Я использовал пакет htmlwidgets, в дополнение к plotly.

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

В JS у меня есть оператор if-else, в котором он запрашивает pointerNumber. Номер указателя — это количество маркеров, полос, линий, всего, что есть на вашем графике. В данном случае это бары.

Номера указателей всегда начинаются с нуля и являются последовательными числами — не думайте, что порядок соответствует визуализации. (Я думаю, что это следует порядку предоставления данных, но я никогда не чувствовал необходимости исследовать это, поэтому я не на 100% уверен в этом.)

В этом коде я изменил указатель номер 0, чтобы он имел черный текст (это светло-розовый). Если вы считаете, что полоса br также должна иметь черный текст, вы можете изменить if(pn === 0){ на if(pn === 0 || pn === 2) {, и теперь полоса рядом с розовой также будет иметь черный текст. (Указатель номер 1 находится в крайнем правом столбце.)

Код события:

hoverer = "function(el, x) {
            el.on('plotly_hover', function(d){
              var pn = d.points[0].pointNumber;
              var fon = [];
              var hov = [];
              if(pn === 0){ 
                col = 'black';
              } else {
                col = 'white'};
              fon = {
                'family': 'DM Sans',
                'size': 15,
                'color': col};
              hov = {
                'bordercolor': 'transparent',
                'font': fon};
              h = {hoverlabel: hov};
              Plotly.restyle(el.id, h);
            });}"

Вот как вы используете его с вашим графиком:

df2 %>% 
  plot_ly(x = ~key,
          y = ~value,
          type = 'bar',
          color = ~value,
          colors = c(rgb(0, 0, 0, 1), rgb(1, 0.85, 0.85, 1)),
          stroke = I('black'),
          span = I(1),
          hoverinfo = 'text',
          hovertext = ~paste0('value: ', value,
                              '\nkey: ', key)) %>% 
  layout(hoverlabel = list(bordercolor = 'transparent', 
                           font = list(family = 'DM Sans', 
                                       size = 15, 
                                       color = 'white'))) %>% 
  htmlwidgets::onRender(hoverer) # this will trigger the event driven code

enter image description hereenter image description here

enter image description here

Другие вопросы по теме