时间戳

首页 > 解决方案 > CSS rCharts 调整与 R renderChart{} 中的 staggerLabel 函数重叠

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

问题描述

xAxis上的名称太长，并且相互重叠，并且可以在此图像中看到： xAxis 标签重叠 - Yaxis numbers are fine

我正在用rCharts包绘制一个discreteBarChart ，其中xAxis包含名称，yAxis包含数字yAxis 上的数字太长（9 位）并且没有全部显示，所以在这样做之后我必须进行一些CSS 编辑才能正确显示它们，参数“staggerLabels = TRUE”在 xAxis 中失去作用，意味着 xAxis 上的名称相互重叠，因为我为数字的 yAxis 包含了 CSS 自定义

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

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

服务器.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)
  })

自定义.css

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

}

很高兴有任何帮助或提示非常感谢

标签： cssrshinyrenderingrcharts

解决方案

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

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>

推荐阅读