Настройки CSS rCharts перекрывают функцию staggerLabel в R renderChart {} - PullRequest
Новая
       27

Настройки CSS rCharts перекрывают функцию staggerLabel в R renderChart {}

0 голосов
/ 04 июня 2019

Имена на xAxis слишком длинные и накладываются друг на друга, и это можно увидеть на этом изображении: xAxis Labels overlapping - числа Yaxis в порядке

Я строю discreteBarChart с rCharts , где xAxis содержит Имена и yAxis содержит число числа на yAxis слишком длинные (9 цифр) и не показаны все, поэтому мне пришлось сделать некоторые правки CSS , чтобы правильно их отобразить после выполнения поэтому аргумент "staggerLabels = TRUE" теряет свой эффект в xAxis, означает, что имена в xAxis перекрывают друг друга, потому что я включил настройку CSS для ось для чисел

Вот как это выглядело до добавления строк CSS: xAxis good labels - не все номера Yaxis показаны

любая помощь, пожалуйста, чтобы предотвратить наложение? или просмотреть метки на оси x в диагональной линии?

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); 

}

был бы так рад любой помощи или подсказке Большое спасибо

1 Ответ

0 голосов
/ 04 июня 2019

Вы можете добавить ниже свойства к каждому 

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>
...