highcharter change highlight color on hover

问题

I'm using highcharter to create a chart with several lines.

I want the lines to have the same color, but highlight with red and wider lines on hover.

I got a JS example from here where the lines change their color to red on hover, however I can't figure out how to "translate" to highcharter. I'm able to manage wider lines on hover but missing the change color part. My code:

library(tidyverse)
library(highcharter)

mf_rank_tbl %>% 
  hchart("line", hcaes(x = event_order, y = Place, group = year)) %>% 
  hc_yAxis(reversed = TRUE) %>% 
  hc_plotOptions(
    series = list(
      states = list(
        hover = list(
          enabled = TRUE,
          lineWidth = 10,
          color = "red"
        )
      )
    )) %>% 
  hc_colors("#dbdbdb")

The chart looks like (wider lines while hovering):

My data:

dput(my_data)
structure(list(Place = c(17, 17, 17, 17, 1, 9, 17, 17, 9, 2, 
13, 4, 3, 3, 17, 5, 3, 17, 5, 9, 3, 2, 17, 17, 33, 5, 9, 17, 
NA, NA, NA, NA, NA, NA, NA, 1, 9, 17, 17, 1, 17, 5, 3, 9, 17, 
5, 33, 9, 17, 1, 5, 2, 5, 1, 9, 1, 3, 2, 3, 3, 17, 1, 3, 1, 17, 
2, 5, 33, 5, 2, 9, 5, 33, NA, NA, 17, 3, 5, 9, 5, 17, 1, 1, 9, 
1, 9, 9, 2, 9, 9, 9, 3, 1, 13, 5, 13, 13, 2, 13, 2, 13, 13, 5, 
13, 13, 25, NA, 13, 1, 3, 3, 1, 3, 13, 9, 25, 13, 3, 5, 3, 2, 
5, 3, 9, 1, 5, 3, 5, 13, 1, 25, 5, 1, 13, 5, 9, 1, 9, 5, 1, 13, 
9, 9, 2, 13, 1, 5, 13, 3, 13, 3, 5, 1, 13, 13, 25, 5, 5, 13, 
5, 13, 13, 5, 5, 13, 9, 2), Points = c(480, 480, 480, 480, 1200, 
500, 400, 400, 600, 860, 540, 804, 876, 876, 480, 732, 876, 480, 
732, 600, 876, 1032, 480, 480, 288, 732, 600, 480, 288, 288, 
288, 288, 288, 288, 288, 1200, 600, 410, 410, 1200, 410, 732, 
876, 600, 410, 732, 225, 600, 410, 1200, 732, 1032, 732, 1200, 
600, 1200, 876, 1032, 876, 876, 410, 1200, 876, 1200, 410, 1032, 
732, 225, 732, 1032, 600, 732, 225, 225, 225, 410, 876, 732, 
600, 732, 410, 1200, 1200, 600, 1200, 600, 3750, 8000, 3750, 
3750, 3750, 6500, 10000, 1750, 5250, 1750, 1750, 8000, 1750, 
8000, 1750, 1750, 5200, 1750, 1750, 500, 500, 1750, 10000, 6500, 
6500, 10000, 6500, 1750, 4000, 500, 1750, 6500, 5200, 6500, 8000, 
5200, 6500, 4000, 10000, 5200, 6500, 5200, 1750, 10000, 500, 
5200, 10000, 1750, 5200, 4000, 10000, 4000, 5200, 10000, 1750, 
4000, 4000, 8000, 1750, 10000, 5200, 1750, 6500, 1750, 6500, 
5200, 10000, 1750, 1750, 500, 5200, 5200, 1750, 5200, 1750, 1750, 
5200, 5200, 1750, 3700, 7800), money = c(4000, 4000, 4000, 4000, 
30000, 5000, 4000, 4000, 5000, 16000, 4500, 9000, 10000, 10000, 
4000, 8000, 10000, 4000, 8000, 5000, 10000, 16000, 4000, 4000, 
3400, 8000, 5000, 4225, NA, NA, NA, NA, NA, NA, NA, 30000, 5300, 
4500, 4500, 30000, 4500, 8000, 10000, 5300, 4500, 8500, 4000, 
5500, 4500, 30000, 8500, 16000, 8500, 30000, 5700, 30500, 12000, 
18000, 12000, 12000, 4800, 30000, 13500, 30000, 4800, 18000, 
9000, 4700, 9000, 18000, 6300, 9000, 4700, NA, NA, 5400, 14000, 
9000, 6300, 9000, 5400, 105000, 40000, 6300, 40000, 6300, 8000, 
25000, 8000, 8000, 8000, 17000, 75000, 8000, 13250, 8000, 8500, 
30000, 9500, 30000, 8500, 14000, 13750, 8500, 8500, 7000, NA, 
8500, 75000, 20000, 17500, 75000, 17500, 8500, 11000, 7000, 8500, 
17500, 14500, 20000, 30000, 14500, 17500, 12000, 75000, 14500, 
17500, 15000, 9500, 1e+05, 8000, 15000, 1e+05, 9500, 15000, 12500, 
1e+05, 12500, 15000, 1e+05, 10500, 12750, 12750, 70000, 10500, 
1e+05, 15000, 10500, 20000, 10500, 25000, 16500, 1e+05, 10500, 
11500, 10000, 16500, 16500, 11500, 16500, 11500, 11500, 16500, 
16500, 11500, 14700, 55000), year = c("2002", "2002", "2002", 
"2002", "2002", "2002", "2002", "2002", "2002", "2002", "2002", 
"2002", "2003", "2003", "2003", "2003", "2003", "2003", "2003", 
"2003", "2003", "2003", "2003", "2003", "2004", "2004", "2004", 
"2004", "2004", "2004", "2004", "2004", "2004", "2004", "2004", 
"2005", "2005", "2005", "2005", "2005", "2005", "2005", "2005", 
"2005", "2006", "2006", "2006", "2006", "2006", "2006", "2006", 
"2006", "2006", "2006", "2006", "2007", "2007", "2007", "2007", 
"2007", "2007", "2007", "2007", "2007", "2007", "2008", "2008", 
"2008", "2008", "2008", "2008", "2008", "2008", "2008", "2008", 
"2008", "2009", "2009", "2009", "2009", "2009", "2009", "2009", 
"2009", "2009", "2009", "2010", "2010", "2010", "2010", "2010", 
"2010", "2010", "2010", "2010", "2010", "2011", "2011", "2011", 
"2011", "2011", "2011", "2011", "2011", "2011", "2011", "2011", 
"2012", "2012", "2012", "2012", "2012", "2012", "2012", "2012", 
"2012", "2012", "2013", "2013", "2013", "2013", "2013", "2013", 
"2013", "2013", "2013", "2013", "2014", "2014", "2014", "2014", 
"2014", "2014", "2014", "2014", "2014", "2014", "2014", "2015", 
"2015", "2015", "2015", "2015", "2015", "2015", "2015", "2015", 
"2015", "2015", "2016", "2016", "2016", "2016", "2016", "2017", 
"2017", "2017", "2017", "2017", "2017", "2017", "2017", "2017", 
"2017", "2017", "2018", "2018"), event_order = c(1L, 2L, 3L, 
4L, 5L, 6L, 7L, 8L, 9L, 10L, 11L, 12L, 1L, 2L, 3L, 4L, 5L, 6L, 
7L, 8L, 9L, 10L, 11L, 12L, 1L, 2L, 3L, 4L, 5L, 6L, 7L, 8L, 9L, 
10L, 11L, 1L, 2L, 3L, 4L, 5L, 6L, 7L, 8L, 9L, 1L, 2L, 3L, 4L, 
5L, 6L, 7L, 8L, 9L, 10L, 11L, 1L, 2L, 3L, 4L, 5L, 6L, 7L, 8L, 
9L, 10L, 1L, 2L, 3L, 4L, 5L, 6L, 7L, 8L, 9L, 10L, 11L, 1L, 2L, 
3L, 4L, 5L, 6L, 7L, 8L, 9L, 10L, 1L, 2L, 3L, 4L, 5L, 6L, 7L, 
8L, 9L, 10L, 1L, 2L, 3L, 4L, 5L, 6L, 7L, 8L, 9L, 10L, 11L, 1L, 
2L, 3L, 4L, 5L, 6L, 7L, 8L, 9L, 10L, 1L, 2L, 3L, 4L, 5L, 6L, 
7L, 8L, 9L, 10L, 1L, 2L, 3L, 4L, 5L, 6L, 7L, 8L, 9L, 10L, 11L, 
1L, 2L, 3L, 4L, 5L, 6L, 7L, 8L, 9L, 10L, 11L, 1L, 2L, 3L, 4L, 
5L, 1L, 2L, 3L, 4L, 5L, 6L, 7L, 8L, 9L, 10L, 11L, 1L, 2L)), row.names = c(NA, 
-167L), class = c("tbl_df", "tbl", "data.frame"))

回答1:

You can define mouseOver and mouseOut events on your series, which will handle the color changing using JS. Here is the code:

mf_rank_tbl %>% 
  hchart("line", hcaes(x = event_order, y = Place, group = year)) %>% 
  hc_yAxis(reversed = TRUE) %>% 
  hc_plotOptions(
    series = list(
      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
        )
      )
    )) %>% 
  hc_colors("#dbdbdb")

[EDIT]

It's working only when stickyTracking is set to FALSE on series.

来源：https://stackoverflow.com/questions/52066731/highcharter-change-highlight-color-on-hover

标签

Highcharts

r-highcharter