110 lines
2.7 KiB
R
110 lines
2.7 KiB
R
|
|
library(htmltools)
|
|
|
|
tooltip_template <- tags$div(
|
|
style = "font-family: Helvetica, Arial, sans-serif; font-size: 12px;",
|
|
tags$div(
|
|
class = "apexcharts-tooltip-title",
|
|
tags$span(
|
|
style = "height: 15px;width: 15px;border-radius: 50%;display: inline-block; background-color: {{serie_color}};"
|
|
),
|
|
"Species: {{group}}"
|
|
),
|
|
tags$div(
|
|
style = "padding: 7px;",
|
|
tags$div(
|
|
class = "apexcharts-tooltip-text",
|
|
tags$div("X: {{x}}"),
|
|
tags$div("Y: {{y}}"),
|
|
tags$div("Custom: {{custom}}")
|
|
)
|
|
)
|
|
)
|
|
|
|
|
|
apex(
|
|
data = iris,
|
|
mapping = aes(
|
|
x = Sepal.Length,
|
|
y = Sepal.Width,
|
|
color = Species,
|
|
custom = paste(Petal.Length, Petal.Width, sep = " - ")
|
|
),
|
|
type = "scatter"
|
|
) %>%
|
|
ax_colors(RColorBrewer::brewer.pal(n = 3, name = "Dark2")) %>%
|
|
ax_tooltip(custom = JS(sprintf(
|
|
"function({ series, seriesIndex, dataPointIndex, w }) {
|
|
console.log(w.config.series[seriesIndex].rdata);
|
|
var source = '%s';
|
|
var template = Handlebars.compile(source);
|
|
var data = w.config.series[seriesIndex].rdata[dataPointIndex];
|
|
data.serie_color = w.globals.colors[seriesIndex];
|
|
var result = template(data);
|
|
return(result);
|
|
}", gsub(doRenderTags(tooltip_template), pattern = "\\n", replacement = "")
|
|
)))
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
template <- tags$div(
|
|
style = "font-family: Helvetica, Arial, sans-serif; font-size: 12px;",
|
|
tags$div(
|
|
class = "apexcharts-tooltip-title",
|
|
"Date: {{x}}"
|
|
),
|
|
tags$div(
|
|
style = "padding: 7px; font-weight: 700; color: {{serie_color}};",
|
|
"{{group}} : {{y}}"
|
|
),
|
|
tags$div(
|
|
"Custom date: {{date_custom}}"
|
|
)
|
|
)
|
|
|
|
data("economics_long", package = "ggplot2")
|
|
economics_long <- economics_long %>%
|
|
group_by(variable) %>%
|
|
slice((n()-100):n())
|
|
|
|
apex(
|
|
data = economics_long,
|
|
type = "line",
|
|
mapping = aes(x = date, y = value01, group = variable, date_custom = format(date, format = "%b %Y"))
|
|
) %>%
|
|
ax_yaxis(decimalsInFloat = 2) %>%
|
|
ax_tooltip(shared = FALSE, custom = JS(sprintf(
|
|
"function({ series, seriesIndex, dataPointIndex, w }) {
|
|
//console.log(w);
|
|
var source = '%s';
|
|
var template = Handlebars.compile(source);
|
|
var data = w.config.series[seriesIndex].rdata[dataPointIndex];
|
|
data.serie_color = w.globals.colors[seriesIndex];
|
|
var result = template(data);
|
|
return(result);
|
|
}", gsub(doRenderTags(template), pattern = "\\n", replacement = "")
|
|
)))
|
|
|
|
|
|
apex(
|
|
data = economics_long,
|
|
type = "line",
|
|
mapping = aes(x = date, y = value01, group = variable)
|
|
) %>%
|
|
ax_yaxis(decimalsInFloat = 2) %>%
|
|
ax_tooltip(shared = FALSE, custom = JS(
|
|
"function({ series, seriesIndex, dataPointIndex, w }) {
|
|
console.log(w.config.series[seriesIndex].rdata);
|
|
return 'a';
|
|
}"
|
|
))
|
|
|
|
|
|
|