Question

我一直在R-markdown与Plotly合作创建一个动态仪表板并遇到一个问题，当我在图表下面创建一个带有水平图例的气泡图时，图例会溢出到图表上系列太多了。

不幸的是，系列的数量变化很大，所以我不能静态地重新定位传奇。理想情况下，图例仍会占据相同的空间，但会有垂直（或水平）滚动条，如垂直图例。

编辑：此信息中心通过电子邮件作为自包含的html文档发送，数据在呈现后不会更新。然而，它每天运行无人值守〜150次（每个用于不同的最终用户），这就是解决方案需要动态的原因。

可重现代码:(字体大小设置为20以减少导致错误所需的数据点数量，相同的错误，字体大小为12以及更多元素）

percent_new_fills <- 
(c(100,98,97,96,34,35,36,36,37,39,43,56,67,78,3,4,5,6,13,14,15,16,16,14,17))
percent_fills <- (c(35,36,36,37,39,43,56,67,78,100,98,97,96,34,8,3,13,14,15,16,13,18,19,18,11))
volume <- (c(3,4,3,2,5,6,3,2,3,4,5,6,4,3,3,2,1,2,3,4,5,6,5,4,3))
pres_name <- c('PrescriberA','PrescriberB','PrescriberC','PrescriberD','PrescriberE','PrescriberF','PrescriberG','PrescriberH','PrescriberI','PrescriberJ','PrescriberK','PrescriberL','PrescriberM','PrescriberN','PrescriberO','PrescriberP','PrescriberQ','PrescriberR','PrescriberS','PrescriberT','PrescriberU','PrescriberV','PrescriberW','PrescriberX','PrescriberY')
region <- "Orlando"
bubble_data <- data.frame(percent_new_fills,percent_fills,volume,pres_name)

bubble <- plot_ly(bubble_data, x = ~percent_new_fills, y = ~percent_fills,
              type = "scatter",
              mode = "markers",
              sizes = c(5,25),
              color = pres_name,
              colors = "Set3",
              size = volume,
              hoverinfo = 'text',
              text = ~paste(pres_name,
                            '</br>', volume, ' TTRx written',
                            '</br> Fill Rate: ', percent_fills,'%',
                            '</br> % New Fills: ', percent_new_fills,'%',
                            sep = ""))%>%
   layout(xaxis = list(title = "% New Fills", ticksuffix="%"),
     yaxis = list(title = "Fill Rate", ticksuffix="%"),
     legend = list(orientation = 'h',x=0,y=-.2,font=list(size=20)),
     margin = list(r=50))  %>% config(displaylogo = FALSE)
 bubble

Expected Result

Bubble chart result with too many series

提前致谢！

Answer 1

我不确定你的仪表板是什么样的，但是你可以使用jQuery将图例向下移动到x轴的标题下面：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<script>
$(document).ready(function() {
  var h =$('text.xtitle').attr('y');
  $('g.legend').attr('transform', 'translate(60,' + h*1.02 +')');
});
</script>

我们检查x轴标题的y坐标是什么，将该值保存在h中并相应地更改g.legend项的转换。

由于我不知道此绘图位于仪表板上的位置（相对于原点），因此可能无法正常工作。但这个想法可能对你有帮助。

气泡图表图例重叠图

1 个答案: