闪亮的服务器在浏览器调整大小时重绘 google 图表
Shiny server redraw google chart on browser resize
我有一个使用 Shiny Dashboard 的 Shiny 服务器。我有一个 Google 图表 (AnnotationChart),它不会在浏览器 window 调整大小时自动调整大小。我可以监听调整大小事件并对其做出反应(在 javascript 中),但我不知道如何使用属于它的数据和选项让图表对象重绘 - 我只是想让它重绘在其容器 width/height 的 90%。
我觉得应该比我发现的更简单。如果我调整浏览器 window 然后更改一个反应元素(如更改输入控件),Shiny 将以新的正确宽度重绘图表以及应重绘的所有内容(即将其调整为 90%它的容器)。感觉如果我可以从 javascript 触发那个重绘事件(无论它是什么),或者模拟对输入元素的更改,那可能会让我到达某个地方。
本质上,问题可以归结为:
在 Shiny 中,如何强制重新绘制不会在浏览器调整大小时自动调整大小的图表?
干杯,
安迪.
我已经使用 googleVis R 包解决了这个问题,我猜你可以使用与我相同的方法,尽管我不确定你的所有东西是如何组合在一起的,因为你更了解JavaScript 那边。
在任何 R 函数中,您都可以使用 session$clientData 变量建立对浏览器中图形状态的依赖关系 window。所以在我的例子中,我使用的是 renderGvis,所以我只是在函数中调用 session$clientData$output_trend_width(这是一个不同的图,但显然它们都同时发生变化),所以每当它发生变化时, plot 以正确的大小重新绘制。就我而言,我只关心宽度,但如果这对你的情况很重要,你显然也可以调用高度。
output$gauge <- renderGvis({
# dependence on size of plots to detect a resize
session$clientData$output_trend_width
df <- data.frame(Label = "Bounce %", Value = 25)
gvisGauge(df,
options = list(min = 0, max = 100, greenFrom = 0,
greenTo = 50, yellowFrom = 50, yellowTo = 70,
redFrom = 70, redTo = 100))
})
希望对您有所帮助?
我有一个使用 Shiny Dashboard 的 Shiny 服务器。我有一个 Google 图表 (AnnotationChart),它不会在浏览器 window 调整大小时自动调整大小。我可以监听调整大小事件并对其做出反应(在 javascript 中),但我不知道如何使用属于它的数据和选项让图表对象重绘 - 我只是想让它重绘在其容器 width/height 的 90%。
我觉得应该比我发现的更简单。如果我调整浏览器 window 然后更改一个反应元素(如更改输入控件),Shiny 将以新的正确宽度重绘图表以及应重绘的所有内容(即将其调整为 90%它的容器)。感觉如果我可以从 javascript 触发那个重绘事件(无论它是什么),或者模拟对输入元素的更改,那可能会让我到达某个地方。
本质上,问题可以归结为:
在 Shiny 中,如何强制重新绘制不会在浏览器调整大小时自动调整大小的图表?
干杯,
安迪.
我已经使用 googleVis R 包解决了这个问题,我猜你可以使用与我相同的方法,尽管我不确定你的所有东西是如何组合在一起的,因为你更了解JavaScript 那边。
在任何 R 函数中,您都可以使用 session$clientData 变量建立对浏览器中图形状态的依赖关系 window。所以在我的例子中,我使用的是 renderGvis,所以我只是在函数中调用 session$clientData$output_trend_width(这是一个不同的图,但显然它们都同时发生变化),所以每当它发生变化时, plot 以正确的大小重新绘制。就我而言,我只关心宽度,但如果这对你的情况很重要,你显然也可以调用高度。
output$gauge <- renderGvis({
# dependence on size of plots to detect a resize
session$clientData$output_trend_width
df <- data.frame(Label = "Bounce %", Value = 25)
gvisGauge(df,
options = list(min = 0, max = 100, greenFrom = 0,
greenTo = 50, yellowFrom = 50, yellowTo = 70,
redFrom = 70, redTo = 100))
})
希望对您有所帮助?