Добавить событие открытия гиперссылки по клику в html-виджет, созданный в R

Я хотел бы иметь возможность сделать что-то вроде ответа на это, но без использования блестящего . Я также хочу связать события onclick, которые открывают гиперссылку, связанную с точкой данных.

Я использую функцию saveWidget из пакета htmlwidgets и знаю, что могу вставить код JavaScript с функцией appendContent из пакета htmltools.

Вот небольшой пример кода:

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-скрипта для сохранения в переменной 'javascript', которую я затем мог бы интегрировать с appendContent в виджет html.


r javascript hyperlink plotly htmlwidgets
person N. Maks    schedule 08.02.2017    source источник

Ответы (2)


arrow_upward
5
arrow_downward

Одним из способов было бы

  • добавьте код Javascript через onStaticRenderComplete, чтобы выполнить его после отображения графика
  • событие Javascript представляет собой простую модификацию примера, найденного здесь
  • URL открывается через window.open

Общее решение с различными трассировками см. в разделе: Открывать гиперссылку при нажатии на график ggplot/plotly

Полный код

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)
person Maximilian Peters    schedule 09.02.2017
comment
Большой! Делает именно то, что я имел в виду. Большое спасибо, вы мне очень помогли! - person N. Maks; 13.02.2017
comment
Теперь я попытался применить ту же технику к гистограмме с накоплением. Все работает, если я оставлю все из aes(), кроме x=x, y=y в вызове ggplot. Но когда я пытаюсь добавить, например. , fill=urls внутри aes() кажется, что функциональность JavaScript испорчена. Тогда всегда будет открываться одна и та же ссылка (в моем случае первая, которая является google), независимо от того, на каком баре я нажимаю. Может быть, вы знаете, что происходит? - person N. Maks; 11.09.2017
comment
Извините, но я не сталкивался с этой проблемой раньше. Пожалуйста, задайте отдельный вопрос, и я уверен, что у кого-то есть решение для него. - person Maximilian Peters; 11.09.2017

arrow_upward
2
arrow_downward

Небольшое исправление к коду Максимилиана Петерса, который не совсем работал у меня для фактора (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=''))
person GM1313    schedule 28.06.2017