悬停时更改系列点颜色

Question

我试图在特定系列中的图表上获取点以在系列中的任何点悬停时更改颜色。即，将鼠标悬停在系列 1 中的一个点上会使系列 1 中的所有点改变颜色（并因此突出显示）。

这有点困难，因为我最初根据点的值对点进行着色。

我尝试调整来自 highcharter change highlight color on hover 的答案，但它似乎不适用于已着色的点，因为它们不会在悬停时发生变化。

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
        )
      )
    ))

图表：

Answer 1

您可以使用非活动状态：https://api.highcharts.com/highcharts/series.scatter.states.inactive

它自 7.1.0 起已包含在 Highcharts 中，并默认启用，因此您需要做的就是确保您使用的是最新的 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]
  }]

});