如何使雷达图适合任何屏幕而不被切断标签？

Question

我正在我的应用程序中创建雷达图。在大屏幕上看起来不错，但标签在小屏幕上被切断：

我可以对布局进行哪些更改，以便在任何屏幕尺寸上正确显示所有标签？

代码示例

library(shiny)
library(bslib)
library(echarts4r)

ui <- page_navbar(
  sidebar = sidebar(),
  nav_panel(
    title = "Chart",
    echarts4rOutput("radar", height = "500px")
  )
)

server <- function(input, output, session) {
  output$radar <- renderEcharts4r({
    df <- data.frame(
      x = c("Openness", "Conscientiousness", "Extroversion", "Agreeableness", "Neuroticism"),
      y = runif(5, 1, 5),
      z = runif(5, 3, 7)
    )
    
    df |>
      e_charts(x) |>
      e_radar(y, max = 7) |>
      e_radar(z) |>
      e_tooltip(trigger = "item") |> 
      e_radar_opts(
        axisName = list(
          color = "black",
          fontFamily = "Libre Franklin",
          fontSize = 18#,
          # formatter = JS("function (value, indicator) {
          #             indicator.nameRotate = 45;
          #             return value;
          #           }")
        )
      )
  })
}

shinyApp(ui, server)

Answer 1

我确信你的实际代码除了这个情节之外还有很多事情要做，所以我包含了一些修改，你可以挑选并选择使用或丢弃，具体取决于什么最适合你。

此外，这是为Shiny 设置的。它不会像在 Shiny 之外那样工作。

在您的

ui

中，您已将绘图渲染器命名为

radar

。这成为后台的一个关键字，并在我在这里添加的 JS 代码中使用。如果你改变了这个名字，你也必须在 JS 中改变它。

在图中，我添加了选项

axisNameGap

和

center

。

• 间隙是单词和情节之间的距离。默认为

  10

  ，我在代码中使用了

  5

  （无单位）。
• 由于责任心总是比神经质更长，所以你可以将其偏离中心。但是，如果您调整字长，图例将不再居中。此外，由于图例位于顶部，因此我将中心向下移动了一点。 （目前宽度和高度分别为 52.5 和 60%。）

我通过

ui

添加了一个JS脚本添加到标题中。在此代码中，有 2 个用于调整大小的函数：一个用于调整绘图标签的字体大小，另一个用于调整图例文本的大小。还有一个超时函数，最初会调整绘图大小，使宽高比为 3/2。

超时函数包括最后一个函数，它创建一个事件，每当窗口大小调整时就会触发该事件。这需要根据窗口的宽度调整字体大小和绘图大小。 （其中窗口是浏览器窗口。）

如果您有任何疑问，请告诉我。

library(shiny)
library(bslib)
library(echarts4r)

ui <- page_navbar(
  tags$head(
    tags$script(HTML(
      "radarFontSize = () => {    /* for plot labels */
        let width = document.getElementById('radar').offsetWidth;
        let nfs = Math.max(Math.round(width / 45), 6);                  /* never less than 6 */
        return nfs;
      }
      
      legFontSize = () => {    /* for legend labels */
        let width = document.getElementById('radar').offsetWidth; /* width determins font size*/
        let nfs = Math.max(Math.round(width / 50), 6);                  /* never less than 6 */
        return nfs
      }

      setTimeout(function() {
             /* 'radar' here is from the name assigned in echarts4rOutput in the UI */
        e = echarts.getInstanceById(radar.getAttribute('_echarts_instance_'));
        w = document.getElementById('radar').offsetWidth * .9;
        e.resize({width: w, height: Math.round(w * 3/5)});             /* resize on render */
      
        window.onresize = () => {                                      /* resize on resize */
          w = document.getElementById('radar').offsetWidth * .9;
          e.resize({width: w, height: Math.round(w * .65)});           /* fit in your hole */
          e.setOption({radar: {axisName: {fontSize: radarFontSize()}}, /* adjust plot to window */
                       textStyle: {fontSize: legFontSize()} });
        }
      }, 300)") # give me a minute to load...
    )
  ),
  sidebar = sidebar(),
  nav_panel(
    title = "Chart",
    echarts4rOutput("radar")
  )
)

server <- function(input, output, session) {
  output$radar <- renderEcharts4r({
    df <- data.frame(
      x = c("Openness", "Conscientiousness", "Extroversion", "Agreeableness", "Neuroticism"),
      y = runif(5, 1, 5),
      z = runif(5, 3, 7)
    )
    
    df |>
      e_charts(x) |>
      e_radar(y, max = 7) |>
      e_radar(z) |>
      e_tooltip(trigger = "item") |> 
      e_radar_opts(
        center = c('52.5%', '60%'),   # <-------- I'm new!
        axisNameGap = 5,              # <-------- I'm new!
        axisName = list(
          color = "black",
          fontFamily = "Libre Franklin",
          fontSize = 18
        )
      )
  })
}

shinyApp(ui, server)