highcharter在悬停时更改高亮显示颜色

我正在使用

highcharter

创建一个包含多行的图表

我希望线条具有相同的颜色，但在悬停时用红色和更宽的线条突出显示

我得到了一个

JS

示例，其中的行在悬停时将颜色更改为红色，但是我不知道如何“转换”为

highcharter

。 我能够在悬停时管理更宽的线条，但缺少更改颜色的部分。 我的代码：

---

图表如下所示（悬停时线条变宽）：

---

我的数据：

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

---

您可以在序列上定义

mouseOver

和

mouseOut

事件，这将使用JS处理颜色更改。代码如下：

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

[编辑]

---

只有当序列上的

stickyTracking

设置为

FALSE

时，它才起作用。

谢谢！我试过这个。使用

mouseOver

可以突出显示，但使用

mouseOut

则无法突出显示。它保持高亮度我不知道为什么，但它只适用于

系列。粘滞跟踪

等于

假

。谢谢！！如果你更新你的答案，我接受你的答案！；）

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