在悬停时更改序列点颜色

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]
  }]

});