将onclick open hyperlink事件添加到在R中创建的html小部件

时间:2017-02-08 07:27:19

标签: javascript r hyperlink plotly htmlwidgets

我希望能够做the answer of this之类的事情但不使用闪亮的东西。我还想绑定打开与数据点关联的超链接的onclick事件。

我正在使用saveWidget中的htmlwidgets函数,并知道我可以使用appendContent中的htmltools函数插入javascript代码 封装

这是一个小样本代码:

library(ggplot2)
library(plotly)
library(htmlwidgets)
library(htmltools)

path.test.results <- "C:\\Users\\img\\"

myData <- data.frame(x=c(1,2,3), y=c(3,2,1))
myLinks <- c("https://www.google.com/", "https://stackoverflow.com/", "https://www.r-project.org/")

ggp <- ggplot(data=myData, aes(x=x, y=y)) + geom_point()
ply <- plotly_build(ggp)

ply$elementId <- "PlotlyGraph"

#javascript <- HTML('<script>document.getElementById("htmlwidget_container").innerHTML = "test";</script>')
javascript <- HTML(paste(
        paste('<button type="button" onclick="document.getElementById(',"'", 'PlotlyGraph', "'", ').style.display=',
                "'", 'none', "'", '">Hide Plot</button>', sep=''),
        paste('<button type="button" onclick="document.getElementById(',"'", 'PlotlyGraph', "'", ').style.display=',
                "'", 'block', "'", '">Show Plot</button>', sep='')
        ,sep=''))

ply <- appendContent(ply, javascript)

saveWidget(widget=ply, file=paste(path.test.results, "test.html", sep=""), selfcontained = FALSE)
dev.off()

现在显然我正在寻求帮助,以便将正确的java脚本代码保存在&#39; javascript&#39;然后我可以将appendContent与html小部件集成。

2 个答案:

答案 0 :(得分:3)

一种方法是

  • 通过onStaticRenderComplete添加Javascript代码,以便在呈现情节后执行
  • Javascript事件是对找到的示例here
  • 的简单修改
  • 网址通过window.open
  • 打开

有关具有不同痕迹的一般解决方案,请参阅:Open hyperlink on click on an ggplot/plotly chart

完整的代码

library(ggplot2)
library(plotly)
library(htmlwidgets)
library(htmltools)

path.test.results <- "C:\\Users\\img\\"

myData <- data.frame(x=c(1,2,3), y=c(3,2,1), urls=c("https://www.google.com/", "http://stackoverflow.com/", "https://www.r-project.org/"))
myLinks <- c("https://www.google.com/", "http://stackoverflow.com/", "https://www.r-project.org/")

ggp <- ggplot(data=myData, aes(x=x, y=y)) + geom_point()
ply <- plotly_build(ggp)

ply$elementId <- "PlotlyGraph"

html <- HTML(paste(
  paste('<button type="button" onclick="document.getElementById(',"'", 'PlotlyGraph', "'", ').style.display=',
        "'", 'none', "'", '">Hide Plot</button>', sep=''),
  paste('<button type="button" onclick="document.getElementById(',"'", 'PlotlyGraph', "'", ').style.display=',
        "'", 'block', "'", '">Show Plot</button>', sep='')
  ,sep=''))

javascript <- HTML(paste("var myPlot = document.getElementById('PlotlyGraph');
myPlot.on('plotly_click', function(data){
var urls = ['", paste(myLinks, collapse = "', '"), "'];
window.open(urls[data.points[0].pointNumber],'_blank');
});", sep=''))

ply <- prependContent(ply, html)
ply <- prependContent(ply, onStaticRenderComplete(javascript))

saveWidget(widget=ply, file=paste(path.test.results, "test.html", sep=""), selfcontained = FALSE)

答案 1 :(得分:1)

对Maximilian Peters代码的略微修正,这对于因子(x)并不适合我。我不是一个Javascript程序员,所以不能真正解释它(也许有人可以吗?),并且只是使用了剧情的例子。

(我在评论中添加了2行)

javascript <- HTML(paste("var myPlot = 
document.getElementById('PlotlyGraph');
                     myPlot.on('plotly_click', function(data){
                     var urls = ['", paste(myLinks, collapse = "', '"),'];//added
                     for(var i=0; i < data.points.length; i++){
                     window.open(urls[data.points[i].x],'_blank'); //changed
                     }//added
                     });", sep=''))