通过单击堆叠的条形图打开选项卡

Posted

技术标签:

【中文标题】通过单击堆叠的条形图打开选项卡【英文标题】:Open tab by clicking on a stacked barchart 【发布时间】:2021-02-06 16:09:40 【问题描述】:

我正在使用 R、ggplot 和 plotly 构建一个包含转推的堆叠条形图。如果单击条形图的一部分,我希望打开一个新的浏览器选项卡并显示来自该特定日期的推文以及指定的转发数量。但是,当我单击下面示例中的一个栏时,会打开一个不同的链接,这表明 url 没有与这些栏正确连接。我该如何解决?

我以前从未工作过,甚至从未见过 javascript,所以答案很可能在那里。该情节最终将出现在 Shiny 应用程序中。

library(rtweet)
library(ggplot2)
library(plotly)

# Get tweets
tweets <- get_timeline("BBC", n = 10)

# Create dataframe
data <- data.frame("retweet_count" = tweets$retweet_count,
                   "week" =  c(1,1,1,2,2,3,4,5,5,6),
                   "url"  =  tweets$status_url)

# Create ggplot
ggplot(data = data,
           aes(x = week,
           y = retweet_count,
           label = url)) + 
  geom_bar(stat = 'sum', 
           fill = "darkblue")

# Convert to plotly
p <- ggplotly(
  p,
  tooltip = c("y", 'label'))

# Add URL data to plot
p$x$data[[1]]$customdata <- data$url

# JS function to make a tab open when clicking on a specific bar
onRender(
  p,
  "
    function(el,x)
    el.on('plotly_click', function(d) 
    var websitelink = d.points[0].customdata;
    window.open(websitelink);
    );
    
    ")

【问题讨论】:

【参考方案1】:

我没有 Twitter 帐户,所以我更改了您的数据集以使用一些 Wikipedia 文章。

您的问题可以通过根据 URL 重新排序 data.frame 来解决。如果您使用来自1:9 的文章运行以下内容,则一切正常。一旦你切换到带有链接9:1 的数据集,你就会得到错误的链接。 Plotly 似乎在内部重新排序 - 与 here 相同的逻辑。

在你的情况下:data &lt;- data[order(data$url),] 应该修复订单。

以下工作正常:

# library(rtweet)
library(ggplot2)
library(plotly)
library(htmlwidgets)

# Get tweets
# tweets <- get_timeline("BBC", n = 10)

# Create dataframe
# data <- data.frame("retweet_count" = tweets$retweet_count,
#                    "week" =  c(1,1,1,2,2,3,4,5,5,6),
#                    "url"  =  tweets$status_url)

# Create dataframe
# Works!
data <- data.frame("retweet_count" = 1:9,
                   "week" =  1:9,
                   "url"  =  paste0(c("https://en.wikipedia.org/wiki/166"), 1:9))
# Doesn't work!
# data <- data.frame("retweet_count" = 9:1,
#                    "week" =  9:1,
#                    "url"  =  paste0(c("https://en.wikipedia.org/wiki/166"), 9:1))

# Create ggplot
p <- ggplot(data = data,
       aes(x = week,
           y = retweet_count,
           label = url)) + 
  geom_bar(stat = 'sum', 
           fill = "darkblue")

# Convert to plotly
p <- ggplotly(
  p,
  tooltip = c("y", 'label'))

# Add URL data to plot
p$x$data[[1]]$customdata <- data$url

# JS function to make a tab open when clicking on a specific bar
onRender(
  p,
  "
    function(el,x)
    el.on('plotly_click', function(d) 
    var websitelink = d.points[0].customdata;
    window.open(websitelink);
    );
    
    ")

【讨论】:

感谢您的努力!应用您的示例确实为我提供了正确的解决方案。然而,对我来说,当不同的推文在同一天发送时会出错,将条形堆叠在一起。由于每天的排序不同,因此订单功能不再起作用。 能否提供dput(tweets)的输出?

以上是关于通过单击堆叠的条形图打开选项卡的主要内容,如果未能解决你的问题,请参考以下文章

R语言可视化堆叠(stack)的条形图并通过另外一个分类变量分离(dodge)条形图(stacking by one variable and dodging by another)实战

Tableau 图表大全2.0之堆叠条形图制作

sigmaplot图表怎么显示纵坐标数值

R语言使用ggplot2可视化堆叠条形图,并在堆叠条形图上显示数据值实战

Highcharts 基本条形图;Highcharts 堆叠条形图;Highcharts 反向条形图

R语言ggplot2可视化:ggplot2可视化水平堆叠条形图并且在每个堆叠条形图的内部居中添加百分比文本标签信息