用 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; 
}

如果有任何帮助，请告诉我。否则一些代码会派上用场来帮助你

c3.js r r