如何在echarts4r图表周围添加边距以适应轴名称？

huangapple
go评论109阅读模式
英文:

How to add margins around echarts4r plots to fit axis names?

问题

我正在尝试使用echarts4r绘制图表，但当我添加轴标签时，它们要么太靠近图表，要么在添加填充时位于图表之外。这个问题也在我尝试将图表添加到quarto revealjs演示文稿时出现。是否有可能增加图表周围的边距，以便容纳轴标签？下面是一个可复制的示例：

我的数据

  1. df <- data.frame(
  2.   x = seq(50),
  3.   y = rnorm(50, 10, 3),
  4.   z = rnorm(50, 11, 2),
  5.   w = rnorm(50, 9, 2)
  6. )

这个示例可以工作，但轴标签和轴名称重叠：

  1. library(echarts4r)
  2. df |>
  3.   e_charts(x) |>
  4.   e_line(z) |>
  5.   e_hide_grid_lines(which = c("x", "y")) |>
  6.   e_x_axis(
  7.     name = "X轴名称",
  8.     nameLocation = "center",
  9.     nameTextStyle = list(fontSize = 35),
  10.     type = 'value',
  11.     min = 5, 
  12.     max = 21, 
  13.     axisLabel = list(fontSize = 25),
  14.     axisLine = list(onZero = FALSE, lineStyle = list(width = 2))
  15.   ) |>
  16.   e_y_axis(
  17.     name = "Y轴名称",
  18.     nameLocation = "center",
  19.     nameTextStyle = list(fontSize = 35),
  20.     type = 'value',
  21.     min = -2, 
  22.     max = 15, 
  23.     axisLabel = list(fontSize = 25),
  24.     axisLine = list(lineStyle = list(width = 2))
  25.   ) |>
  26.   e_legend(textStyle = list(fontSize = 35))

在这种情况下，轴名称超出了图表：

  1. df |>
  2.   e_charts(x) |>
  3.   e_line(z) |>
  4.   e_hide_grid_lines(which = c("x", "y")) |>
  5.   e_x_axis(
  6.     name = "X轴名称",
  7.     nameLocation = "center",
  8.     nameTextStyle = list(fontSize = 35, padding = c(30, 0, 0, 0)),
  9.     type = 'value',
  10.     min = 5, 
  11.     max = 21, 
  12.     axisLabel = list(fontSize = 25),
  13.     axisLine = list(onZero = FALSE, lineStyle = list(width = 2))
  14.   ) |>
  15.   e_y_axis(
  16.     name = "Y轴名称",
  17.     nameLocation = "center",
  18.     nameTextStyle = list(fontSize = 35, padding = c(0, 0, 30, 0)),
  19.     type = 'value',
  20.     min = -2, 
  21.     max = 15, 
  22.     axisLabel = list(fontSize = 25),
  23.     axisLine = list(lineStyle = list(width = 2))
  24.   ) |>
  25.   e_legend(textStyle = list(fontSize = 35))

如何在echarts4r图表周围添加边距以适应轴名称？

如何在echarts4r图表周围添加边距以适应轴名称？

英文:

I am trying to make a plot using echarts4r and when I add axis labels they are either too close or outside of the plot when padding is added. This issue also occurs when I try to add the plot to a quarto revealjs presentation. Is it possible to increase the margins around the plot so that it can fit the axes labels? A reproducible example is below:

My data

  1. df &lt;- data.frame(
  2.   x = seq(50),
  3.   y = rnorm(50, 10, 3),
  4.   z = rnorm(50, 11, 2),
  5.   w = rnorm(50, 9, 2)
  6. )

This works but the axis labels and axis names are overlapping:

  1. library(echarts4r)
  2. df |&gt;
  3.   e_charts(x) |&gt;
  4.   e_line(z) |&gt;
  5.   e_hide_grid_lines(which = c(&quot;x&quot;, &quot;y&quot;)) |&gt;
  6.   e_x_axis(
  7.     name = &quot;X axis name&quot;,
  8.     nameLocation = &quot;center&quot;,
  9.     nameTextStyle = list(fontSize = 35),
  10.     type = &#39;value&#39;,
  11.     min = 5, 
  12.     max = 21, 
  13.     axisLabel = list(fontSize = 25),
  14.     axisLine = list(onZero = FALSE, lineStyle = list(width = 2))
  15.   ) |&gt;
  16.   e_y_axis(
  17.     name = &quot;Y axis name&quot;,
  18.     nameLocation = &quot;center&quot;,
  19.     nameTextStyle = list(fontSize = 35),
  20.     type = &#39;value&#39;,
  21.     min = -2, 
  22.     max = 15, 
  23.     axisLabel = list(fontSize = 25),
  24.     axisLine = list(lineStyle = list(width = 2))
  25.   ) |&gt;
  26.   e_legend(textStyle = list(fontSize = 35))

如何在echarts4r图表周围添加边距以适应轴名称？

In this case the axis names goes out of the plot:

  1. df |&gt;
  2.   e_charts(x) |&gt;
  3.   e_line(z) |&gt;
  4.   e_hide_grid_lines(which = c(&quot;x&quot;, &quot;y&quot;)) |&gt;
  5.   e_x_axis(
  6.     name = &quot;X axis name&quot;,
  7.     nameLocation = &quot;center&quot;,
  8.     nameTextStyle = list(fontSize = 35, padding = c(30, 0, 0, 0)),
  9.     type = &#39;value&#39;,
  10.     min = 5, 
  11.     max = 21, 
  12.     axisLabel = list(fontSize = 25),
  13.     axisLine = list(onZero = FALSE, lineStyle = list(width = 2))
  14.   ) |&gt;
  15.   e_y_axis(
  16.     name = &quot;Y axis name&quot;,
  17.     nameLocation = &quot;center&quot;,
  18.     nameTextStyle = list(fontSize = 35, padding = c(0, 0, 30, 0)),
  19.     type = &#39;value&#39;,
  20.     min = -2, 
  21.     max = 15, 
  22.     axisLabel = list(fontSize = 25),
  23.     axisLine = list(lineStyle = list(width = 2))
  24.   ) |&gt;
  25.   e_legend(textStyle = list(fontSize = 35))

如何在echarts4r图表周围添加边距以适应轴名称？

答案1

得分: 1

你可以通过e_grid来增加绘图周围的边距。

从文档中，默认情况下边距设置为：

  • left="10%"
  • top=60
  • right="10%"
  • bottom=60

因此，为了考虑轴名称周围的填充，你可以将bottom边距增加到90，将left增加到例如"15%"：

  1. library(echarts4r)
  3. set.seed(123)
  5. df %>%
  6.   e_charts(x) %>%
  7.   e_line(z) %>%
  8.   e_hide_grid_lines(which = c("x", "y")) %>%
  9.   e_x_axis(
  10.     name = "X轴名称",
  11.     nameLocation = "center",
  12.     nameTextStyle = list(
  13.       fontSize = 35,
  14.       padding = c(30, 0, 0, 0)
  15.     ),
  16.     type = "value",
  17.     min = 5,
  18.     max = 21,
  19.     axisLabel = list(fontSize = 25),
  20.     axisLine = list(onZero = FALSE, lineStyle = list(width = 2))
  21.   ) %>%
  22.   e_y_axis(
  23.     name = "Y轴名称",
  24.     nameLocation = "center",
  25.     nameTextStyle = list(
  26.       fontSize = 35, padding = c(0, 0, 30, 0)
  27.     ),
  28.     type = "value",
  29.     min = -2,
  30.     max = 15,
  31.     axisLabel = list(fontSize = 25),
  32.     axisLine = list(lineStyle = list(width = 2))
  33.   ) %>%
  34.   e_legend(textStyle = list(fontSize = 35)) %>%
  35.   e_grid(left = "15%", bottom = "90")

如何在echarts4r图表周围添加边距以适应轴名称？

  2. [1]: https://i.stack.imgur.com/oiIZo.png
  4. <details>
  5. <summary>英文:</summary>
  7. You could increase the margin around the plot via `e_grid`.
  9. From the 
    (https://echarts.apache.org/en/option.html#grid.left) the margins are by default set to
  11. * `left=&quot;10%&quot;`
  12. * `top=60`
  13. * `right=&quot;10%&quot;` 
  14. * `bottom=60`
  16. Hence, to account of the padding around the axis name you could increase the `bottom` margin to `90` and on the `left` to e.g. `&quot;15%&quot;` :

library(echarts4r)

set.seed(123)

df |>
e_charts(x) |>
e_line(z) |>
e_hide_grid_lines(which = c("x", "y")) |>
e_x_axis(
name = "X axis name",
nameLocation = "center",
nameTextStyle = list(
fontSize = 35,
padding = c(30, 0, 0, 0)
),
type = "value",
min = 5,
max = 21,
axisLabel = list(fontSize = 25),
axisLine = list(onZero = FALSE, lineStyle = list(width = 2))
) |>
e_y_axis(
name = "Y axis name",
nameLocation = "center",
nameTextStyle = list(
fontSize = 35, padding = c(0, 0, 30, 0)
),
type = "value",
min = -2,
max = 15,
axisLabel = list(fontSize = 25),
axisLine = list(lineStyle = list(width = 2))
) |>
e_legend(textStyle = list(fontSize = 35)) |>
e_grid(left = "15%", bottom = "90")

  2. [![enter image description here][1]][1]
  5.   [1]: https://i.stack.imgur.com/oiIZo.png
  7. </details>
  11. # 答案2
  12. **得分**: 0
  14. 似乎你只需要调整 x 和 y 轴的 padding 参数。
  16. ```R
  17. df |&gt;
  18.     e_charts(x) |&gt;
  19.     e_line(z) |&gt;
  20.     e_hide_grid_lines(which = c(&quot;x&quot;, &quot;y&quot;)) |&gt;
  21.     e_x_axis(
  22.         name = &quot;X 轴名称&quot;,
  23.         nameLocation = &quot;居中&quot;,
  24.         nameTextStyle = list(fontSize = 35, padding = c(20, 0, 0, 0)),
  25.         type = &#39;数值类型&#39;,
  26.         min = 5, 
  27.         max = 21, 
  28.         axisLabel = list(fontSize = 25),
  29.         axisLine = list(onZero = FALSE, lineStyle = list(width = 1.5))
  30.     ) |&gt;
  31.     e_y_axis(
  32.         name = &quot;Y 轴名称&quot;,
  33.         nameLocation = &quot;居中&quot;,
  34.         nameTextStyle = list(fontSize = 35, padding = c(0, 0, 15, 0)),
  35.         type = &#39;数值类型&#39;,
  36.         min = -2, 
  37.         max = 15, 
  38.         axisLabel = list(fontSize = 25),
  39.         axisLine = list(lineStyle = list(width = 1))
  40.     ) |&gt;
  41.     e_legend(textStyle = list(fontSize = 35))
英文:

Seems all you need to do is adjust the padding arguments for the x and y axis.

  1. df |&gt;
  2.     e_charts(x) |&gt;
  3.     e_line(z) |&gt;
  4.     e_hide_grid_lines(which = c(&quot;x&quot;, &quot;y&quot;)) |&gt;
  5.     e_x_axis(
  6.         name = &quot;X axis name&quot;,
  7.         nameLocation = &quot;center&quot;,
  8.         nameTextStyle = list(fontSize = 35, padding = c(20, 0, 0, 0)),
  9.         type = &#39;value&#39;,
  10.         min = 5, 
  11.         max = 21, 
  12.         axisLabel = list(fontSize = 25),
  13.         axisLine = list(onZero = FALSE, lineStyle = list(width = 1.5))
  14.     ) |&gt;
  15.     e_y_axis(
  16.         name = &quot;Y axis name&quot;,
  17.         nameLocation = &quot;center&quot;,
  18.         nameTextStyle = list(fontSize = 35, padding = c(0, 0, 15, 0)),
  19.         type = &#39;value&#39;,
  20.         min = -2, 
  21.         max = 15, 
  22.         axisLabel = list(fontSize = 25),
  23.         axisLine = list(lineStyle = list(width = 1))
  24.     ) |&gt;
  25.     e_legend(textStyle = list(fontSize = 35))

huangapple
  • 本文由 发表于 2023年2月24日 07:57:22
  • 转载请务必保留本文链接：https://go.coder-hub.com/75551461.html
  • echarts4r
  • quarto
  • r
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定