四夸托位数字标签断开echarts图的工具提示格式

xu3bshqb  于 10个月前  发布在  Echarts
关注(0)|答案(1)|浏览(111)

将地物标签添加到创建echarts图的夸托块后,工具提示中的文本将变得不对齐。这似乎是最近才提出的问题。
下面是一个没有图形标签的示例,工具提示正确呈现:

---
title: "test"
date: "`r Sys.Date()`"
---

```{r}

df <- data.frame(
  group = c("Group A", "Group A", "Group B", "Group B", "Group C", "Group C"),
  category = c("really really long catgegory", "medium category", "short", "really really long catgegory", "medium category", "short"),
  value = c(3, 20, 43, 5, 82, 32)
)

# Create an echarts plot
df |> 
  dplyr::group_by(category) |> 
  echarts4r::e_chart(group) |> 
  echarts4r::e_bar(value, stack = "stacked") |> 
  echarts4r::e_tooltip(trigger = "axis") 
字符串

![](https://i.stack.imgur.com/G8UML.png)
的数据
下面是一个包含图形标签的示例,它会导致工具提示格式发生更改:

title: "test"
date: "r Sys.Date()"

#| label: fig-1

df <- data.frame(
  group = c("Group A", "Group A", "Group B", "Group B", "Group C", "Group C"),
  category = c("really really long catgegory", "medium category", "short", "really really long catgegory", "medium category", "short"),
  value = c(3, 20, 43, 5, 82, 32)
)

# Create an echarts plot
df |> 
  dplyr::group_by(category) |> 
  echarts4r::e_chart(group) |> 
  echarts4r::e_bar(value, stack = "stacked") |> 
  echarts4r::e_tooltip(trigger = "axis") 
型

![](https://i.stack.imgur.com/8pKb4.png)
的
这是夸托的窃听器吗?是否有方法确保工具提示文本在添加地物标签时也是左对齐的?
e7arh2l6

e7arh2l61#

问题是与夸托应用的CSS发生冲突。当添加图标签时,图表被 Package 在一个div中,类.quarto-figure-center具有text-align: center属性。此属性由工具提示继承,因此您将获得居中的工具提示文本。
我不知道该怎么办。但是有一个选项对我来说很有用,那就是显式地设置工具提示的文本对齐方式,这可以通过e_tooltip中的extraCssText选项来实现。

---
title: "test"
date: "`r Sys.Date()`"
---

```{r}
#| label: fig-1

df <- data.frame(
  group = c("Group A", "Group A", "Group B", "Group B", "Group C", "Group C"),
  category = c(
    "really really long catgegory", "medium category",
    "short", "really really long catgegory", "medium category", "short"
  ),
  value = c(3, 20, 43, 5, 82, 32)
)

df |>
  dplyr::group_by(category) |>
  echarts4r::e_chart(group) |>
  echarts4r::e_bar(value, stack = "stacked") |>
  echarts4r::e_tooltip(
    trigger = "axis",
    extraCssText = list("text-align: left;")
  )
字符串

![](https://i.stack.imgur.com/jNAGf.png)
的数据

相关问题