CSS rCharts 调整与 R renderChart 中的 staggerLabel 函数重叠{}

Question

xAxis 上的名称太长，并且相互重叠，可以在这张图中看到： xAxis Labels overlapping - Yaxis numbers are fine

我正在用 rCharts 包绘制一个 discreteBarChart，其中 xAxis 包含 Names 和 yAxis 包含 numbers yAxis 上的数字太长 （9 位） 并且没有全部显示，所以我不得不做一些 CSS 编辑 以正确显示它们，在这样做之后，参数 "staggerLabels = TRUE" 在xAxis，表示 xAxis 上的名称相互重叠，因为我包括 CSS 数字

yAxis 的自定义

这是添加 CSS 行之前的样子： xAxis good labels- Yaxis numbers not shown all

请帮忙防止重叠？或以对角线查看 xAxis 上的标签？

server.r

    output$top10Clients <- renderChart({

    topclients <- 
      arrange(ct %>%  
                group_by(as.character(Customer)) %>% 
                summarise(
                  CTo = sum(as.numeric(`Net turnover`))
                ), desc(CTo))
    colnames(topclients)[colnames(topclients)=="as.character(Customer)"] <- "Customer"

    topclients <- subset(topclients[1:10,], select = c(Customer, CTo))

    p <- nPlot(CTo~Customer, data = topclients, type = "discreteBarChart", dom = "top10Clients")
    p$params$width <- 1000
    p$params$height <- 200
    p$xAxis(staggerLabels = TRUE)
    p$yAxis(staggerLabels = TRUE, width = 50)

    return(p)
  })

custom.css

.nv-discreteBarWithAxes .nvd3 > g > g > text,
.nv-axisMaxMin text {
  transform: translateX(13px); 

}

如果有任何帮助或提示，我们将非常高兴非常感谢

Answer 1

您可以将以下属性添加到每个

div.a {
  width: 150px;
  height: 80px;
  -ms-transform: rotate(20deg); 
  -webkit-transform: rotate(20deg);
  transform: rotate(20deg);
}

<body>
<h2>Test</h2>
<div class="a">Test World!</div>
<br>

</body>

CSS rCharts 调整与 R renderChart 中的 staggerLabel 函数重叠{}

CSS rCharts adjustments overlap the staggerLabel function in R renderChart{}

css

r

shiny

rendering

rcharts