highcharter 在悬停时更改突出显示颜色
highcharter change highlight color on hover
我正在使用 highcharter 创建包含多条线的图表。
我希望线条具有相同的颜色，但是悬停时用红色和较宽的线条突出显示。
我从 here 中得到了一个 JS 示例，其中线条在悬停时将颜色更改为红色，但是我不知道如何 "translate" 到 highcharter.
我能够在悬停时管理更宽的线条，但缺少更改颜色部分。
我的代码：
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")
图表看起来像（悬停时线条较宽）：
我的数据：
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 时才有效。
我正在使用 highcharter 创建包含多条线的图表。
我希望线条具有相同的颜色，但是悬停时用红色和较宽的线条突出显示。
我从 here 中得到了一个 JS 示例，其中线条在悬停时将颜色更改为红色，但是我不知道如何 "translate" 到 highcharter.
我能够在悬停时管理更宽的线条，但缺少更改颜色部分。
我的代码：
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")
图表看起来像（悬停时线条较宽）：
我的数据：
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 时才有效。