[英]Clickable Points Popup in Highcharter R Shiny
Here is my question. 这是我的问题。 Is it possible to replicate the following example from Highcharts in R Highchart? 是否可以从R Highchart中的Highcharts复制以下示例? The idea is to introduce various text inside a popup which appears when a point is selected. 想法是在选择点时出现的弹出窗口中引入各种文本。
Example here: https://jsfiddle.net/jnupf62x/ 此处的示例: https : //jsfiddle.net/jnupf62x/
This is what I have tried so far: 到目前为止,这是我尝试过的:
data <- data.frame(x = c(1,2,3,4,5,6),
y = c(2,4,1,5,2,6))
highchart() %>%
hc_add_series(data, "line") %>%
hc_tooltip(shared = T,
crosshairs = T) %>%
hc_plotOptions(
series = list(
cursor = "pointer",
point = list(
events = list(click = JS("function () {
hs.htmlExpand(null, {
pageOrigin: {
x: this.pageX,
y: this.pageY
},
headingText: 'testing1',
maincontentText: 'testing2',
width: 310,
height: 500
});
}")))
))
If we can crack this nut then maybe we can do something like this: http://jsfiddle.net/y4JV5/4/ 如果我们可以解决这个问题,那么也许我们可以做这样的事情: http : //jsfiddle.net/y4JV5/4/
Thanks 谢谢
For all those interested, here is the solution to the problem above. 对于所有感兴趣的人,这里是上述问题的解决方案。 I am still working on a solution to display a chart using "htmlExpand" function. 我仍在研究使用“ htmlExpand”功能显示图表的解决方案。 http://jsfiddle.net/y4JV5/4/ http://jsfiddle.net/y4JV5/4/
library(shiny)
library(highcharter)
data <- data.frame(x = c(1,2,3,4),
y = c(2,1,5,1))
js_func <- JS("function (event) {
hs.htmlExpand(null, {
pageOrigin: {
x: event.pageX || event.clientX,
y: event.pageY || event.clientY
},
headingText: event.point.series.name,
maincontentText: 'This point has coordinates: (' + event.point.x + ', ' + event.point.y + ')' ,
height: 100,
width: 250
});
}")
ui <- fluidPage(
tags$head(HTML("\n<script src='https://www.highcharts.com/media/com_demo/js/highslide-full.min.js'></script>
\n<script src='https://www.highcharts.com/media/com_demo/js/highslide.config.js' charset='utf-8'></script>
\n<link rel='stylesheet' type='text/css' href='https://www.highcharts.com/media/com_demo/css/highslide.css'/>")),
highchartOutput("a1")
)
server <- function(input, output){
output$a1 <- renderHighchart({
highchart() %>%
hc_add_series(data, "line", hcaes(x,y), name = "Sample Series") %>%
hc_plotOptions(series = list(
cursor = "pointer",
events = list(click = js_func)
))
})
}
shinyApp(ui, server)
Hardest part is to link the data to the "hs.htmlExpand" part. 最困难的部分是将数据链接到“ hs.htmlExpand”部分。 This is done only using event.point
. 仅使用event.point
完成此操作。
Hopefully this is helpful. 希望这会有所帮助。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.