将超链接添加到“闪亮图" [英] Adding hyperlinks to Shiny plots

问题描述

我制作了一个Shiny应用程序，使用不同的绘图解决方案在Shiny(我最喜欢的是plotly)上从ggplot2渲染图形.
我喜欢用户可以与图形进行交互的事实:使用plotly，用户可以缩放图形或单击点(例如在散点图上)并访问其值.

I have made a Shiny app using different plotting solutions to render graphs from ggplot2 on Shiny (my favorite being plotly).
I like the fact that the user can interact with the graph: with plotly the user can zoom on the graph or click on points (on a scatterplot for exemple) and access their values.

我想将散点图上的每个点链接到一个URL(不显示它)，并允许用户单击一个点，这将触发超链接的激活，从而打开一个新的网页.

I would like to link each point on my scatterplot to a URL (without displaying it) and to allow the user to click on a dot, which would trigger the activation of the hyperlink opening a new webpage.

如果我可以使用plotly来做到这一点，那将是惊人的，但是我愿意接受任何其他类型的技术(ggvis，dygraph等).

If I could use plotly to do that that would be amazing but I am open to any other kind of technologies (ggvis,dygraph, etc.).

推荐答案

发光的应用程序使用 plotly的postMessage API 或 plotly.js ，它们都公开了click，hover和zoom事件.这些事件尚未作为对基础闪亮服务器的回调公开，但是可以使用自定义javascript访问这些事件，您可以在闪亮状态中使用自己的代码.

Shiny apps use plotly's postMessage API or plotly.js, both of which expose click, hover, and zoom events. These events aren't yet exposed as callbacks to the underlying shiny server, but they are accessible with custom javascript that you can serve yourself in shiny.

下面是有关点击事件的示例:

Here's an example with click events:

ui.R

library(shiny)
library(plotly)

shinyUI(fluidPage(
  mainPanel(
    plotlyOutput("trendPlot"),
    tags$head(tags$script(src="clickhandler.js"))
  )
))

server.R

library(shiny)
library(plotly)

x = c(1, 2, 3)
y = c(4, 2, 4)
links = c("https://plot.ly/r/", 
          "https://plot.ly/r/shiny-tutorial", 
          "https://plot.ly/r/click-events")

df = data.frame(x, y, links)

shinyServer(function(input, output) {

  output$trendPlot <- renderPlotly({
    # Create a ggplot
    g = ggplot(data=df, aes(x = x, y = y)) + geom_point()
    # Serialize as Plotly's graph universal format
    p = plotly_build(g)
    # Add a new key, links, that JS will access on click events
    p$data[[1]]$links = links
    p

    # Alternatively, use Plotly's native syntax. More here: https://plot.ly/r
    # plot_ly(df, x=x,y=y,links=links)
  })
})

www/clickhandler.js

$(document).ready(function(){
// boiler plate postMessage plotly code (https://github.com/plotly/postMessage-API)
var plot = document.getElementById('trendPlot').contentWindow;

pinger = setInterval(function(){
    plot.postMessage({task: 'ping'}, 'https://plot.ly')
}, 100);

var clickResponse = function(e) {
     plot = document.getElementById('trendPlot').contentWindow;
    var message = e.data;
     console.log( 'New message from chart', message );
    if(message.pong) {
        // tell the embedded plot that you want to listen to click events
        clearInterval(pinger);
        plot.postMessage({
              task: 'listen', events: ['click']}, 'https://plot.ly');
          plot.postMessage({
            task: 'relayout',
            'update': {hovermode: 'closest'},
        },
        'https://plot.ly');
    }
    else if(message.type === 'click') {
        var curveNumber = message['points'][0]['curveNumber'],
            pointNumber = message['points'][0]['pointNumber'];

        var link;
        var traces = message.points[0].data;
        if(traces !== null && typeof traces === 'object') {
            link = traces.links[pointNumber];
        } else {
            link = traces[curveNumber].links[pointNumber];
        }

        console.log(link);

        var win = window.open(link, '_blank');
        win.focus();
    }
};

window.addEventListener("message", clickResponse, false);

});

以下是一些可能有用的资源:

Here are some more resources that might be helpful:

• 使用R使用JavaScript在JavaScript中为自定义图表添加自定义交互性
• 尤其是绑定到JavaScript中的点击事件
• Shiny和plotly入门
• Plotly postMessage API ，用于向托管的绘图图形添加自定义交互性

• Adding custom interactivity to plotly charts in javascript with R
• In particular Binding to click events in JavaScript
• Getting started with Shiny and plotly
• Plotly postMessage API for adding custom interactivity to hosted plotly graphs

这篇关于将超链接添加到“闪亮图"的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！