Изменить цвет точки серии при наведении - PullRequest
Новая
       47

Изменить цвет точки серии при наведении

0 голосов
/ 18 февраля 2020

Я пытаюсь заставить точки на моем графике в определенном ряду изменить цвет, когда любая точка в ряду наведена. Т.е. при наведении курсора на точку в серии 1 все точки в серии 1 меняют цвет (и, следовательно, выделяются цветом).

Это немного усложняется, поскольку я изначально окрашиваю точки в зависимости от их значения.

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

library(highcharter)
library(data.table)
library(dplyr)

# generate data
data = data.table(
  CJ(x = seq(as.Date("2019-01-01"), as.Date("2019-01-10"), by = "day"),
     group = seq(1,2))
)
data[, value := round(runif(n=20, -5,5),4)]

# color points based on value
data = data.table(data %>% mutate(cat=cut(value, breaks=quantile(data[value!=0]$value, seq(0,1,0.1)), labels=seq(1,10))))
colf = colorRampPalette(colors = c("red","yellow", "green"))
cols = colf(10)
data[, color := as.factor(cols[cat])]

# get point position
data$x = datetime_to_timestamp(data$x)
data = data.table(data %>% group_by(x) %>% mutate(y = order(order(value))-sum(value<0,na.rm=T)))

# plot data
highchart() %>%
  hc_xAxis(type = "datetime", dateTimeLabelFormats = list(day = '%d of %b')) %>%
  hc_add_series(data[group==1], name = "group 1", marker = list(symbol = fa_icon("circle"))) %>%
  hc_add_series(data[group==2], name = "group 2", marker = list(symbol = fa_icon("circle"))) %>%
  hc_chart(type = "scatter") %>%
  hc_tooltip(pointFormat = "Performance = <b>{point.value}</b> <br> Group = <b>{point.name}</b>") %>%
  # hover over part
  hc_plotOptions(
    series = list(
      stickyTracking = FALSE,
      events = list(
        mouseOver = JS("function() { if(this.options.color !== 'red') {this.update({color: 'red'})} }"),
        mouseOut = JS("function() { if(this.options.color === 'red') {this.update({color: '#ddd'})} }")
      ),
      states = list(
        hover = list(
          enabled = TRUE,
          lineWidth = 10
        )
      )
    ))

График:

enter image description here

1 Ответ

1 голос
/ 18 февраля 2020

Вы можете использовать неактивное состояние: https://api.highcharts.com/highcharts/series.scatter.states.inactive

Он был включен в Highcharts с 7.1.0 и включен по умолчанию, поэтому все, что вам нужно сделать, это убедиться, что вы используя новейший Highcharter.

Вот вам пример этого: https://jsfiddle.net/BlackLabel/2wu3jrmt

Highcharts.chart('container', {

  chart: {
    type: 'scatter'
  },

  series: [{
    data: [4, 3, 5, 6, 2, 5]
  }, {
    data: [2, 5, 3, 7, 3, 1]
  }, {
    data: [1, 1, 6, 3, 4, 3]
  }]

});
...