高位更改悬停时突出显示颜色 [英] highcharter change highlight color on hover

查看：68
本文介绍了高位更改悬停时突出显示颜色的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我正在使用 highcharter 创建具有多条线的图表.

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

我从

我的数据:

  dput(my_data)结构(list(Place = c(17，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、17NA，NA，NA，NA，NA，NA，NA，NA，1、9、17、17、1、17、5、3、9、175、33、9、17、1、5、2、5、1、9、1、3、2、3、3、17、1、3、1、172，5，33，5，2，9，9，5，33，NA，NA，17，3，5，9，5，5，17，1，1，9，1，9，9，2，9，9，9，9，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、25、3、9、1、5、3、5、13、1、25、5、1、13、5、9、1、9、5、1、139，9，2，13，1，1，5，13，3，13，3，5，1，13，13，25，5，5，13，5，13，13，5，5，13，9，2)，点= 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)，金钱= 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，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、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)，年= 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))，行名称= c(NA，-167L)，类别= 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(系列=清单(事件=清单(mouseOver = JS("function(){if(this.options.color！=='red'){this.update({color:'red'})}}"))，mouseOut = JS("function(){if(this.options.color ==='red'){this.update({color:'#ddd'})}}")))，状态=列表(悬停=列表(enabled = TRUE，lineWidth = 10))))％&％;％hc_colors(#dbdbdb")

仅当系列上的 stickyTracking 设置为 FALSE 时，该功能才起作用.

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

解决方案

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.

这篇关于高位更改悬停时突出显示颜色的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
其他开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆