如何解决用 css 调整 c3 轴标签
我使用的是 R 的 c3 包,它是 Masayuki Tanaka 对 C3 javascript 图表库的包装。
我下面的 c3 图表截断了 x 轴上的最后一个日期。
使用 Chrome Inspector 我可以手动将 text-anchor: middle
调整为 text-anchor: end
这似乎有效。
但是,我不明白如何用 css 做到这一点。
这是我的 R 脚本和相关的 css,尽管我认为 R 与这里的问题无关。
R 脚本
library(shiny)
library(c3)
data <- data.frame(a = abs(rnorm(20) * 10),b = abs(rnorm(20) * 10),date = seq(as.Date("2014-01-01"),by = "month",length.out = 20))
ui <- fluidPage(
includeCSS("c3.css"),c3Output("chart",height = "100%")
)
server <- function(input,output,session) {
output$chart <- renderC3({
data %>%
c3(x = 'date') %>%
tickAxis('x',count = 5,format = '%Y-%m-%d')
})
}
shinyApp(ui,server)
css
.c3-line {
stroke-width: 4px !important;
}
.c3-axis-x-label {
text-anchor: end;
}
解决方法
您尚未粘贴任何实际代码,但以下代码很可能会有所帮助:
.c3-axis-x g.tick:nth-last-child(3) text {
transform:translateX(-5%);
}
您需要正确定位文本并根据需要调整值。
编辑:实际上它不是 :last-child
- 根据一些实际代码进行了调整。本质上,您需要正确定位选择器并应用 transform
属性。
Edit2:所以实际上是 .c3-axis-x
组包含对勾文本。代码更新(再次)
让我立刻想到的一件事:
使用您的 css,您只针对 'date' 元素。 您的其他“文本”元素没有类,因此“.c3-axis-x-label”的 css 将仅针对第一个文本元素。
尝试将“c3-axis-x-label”类也添加到其他“text”元素中。
另一件事:
当你设置这样的样式时,它总是会覆盖应用的 CSS。
我能想到的一种解决方案是在 CSS 中添加 !important 以覆盖样式。我不建议使用 !important,但如果直接更改 css 太困难,那么这可能是一个解决方案。
如果您可以向其他文本元素添加类,请尝试将样式应用于 css 中的“文本”:
g > text {
text-anchor: end;
}
如果有任何帮助,请告诉我。否则一些代码会派上用场来帮助你
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。