Chartist js 在 x 轴上旋转标签

Question

我已经建立了一个 js fiddle，它根据 github 上提出的问题演示了如何旋转轴标签。它在下面的 js fiddle 示例中工作正常，但是当我在我的网站上尝试这个时，标签不可见。

html {
  box-sizing: border-box;
  font-family: Roboto, sans-serif;
}

*, *:before, *:after {
  box-sizing: inherit;
}

.ct-label.ct-label.ct-horizontal {
  position: fixed;
  justify-content: flex-end;
  text-align: right;
  transform-origin: 100% 0;
  transform: translate(-100%) rotate(-45deg);
}

如果我调整屏幕大小使其变小，标签就会出现，所以我认为问题出在图表的大小上，它占用了 100% 的宽度

Answer 1

举个例子:

svg.ct-chart-bar, svg.ct-chart-line{
    overflow: visible;
}
.ct-label.ct-label.ct-horizontal.ct-end {
  position: relative;
  justify-content: flex-end;
  text-align: right;
  transform-origin: 100% 0;
  transform: translate(-100%) rotate(-45deg);
  white-space:nowrap;
}

http://jsfiddle.net/madvic/qek2sjs0/4/

现在处理长文本...

Answer 2

madvic 的回答对我不起作用。所有 axisx 文本都垂直排成一行。然而这有效：

.ct-label.ct-horizontal.ct-end {
   font-size: 10px !important;
   white-space:nowrap;
   writing-mode:vertical-rl; 
   transform:  translateY(-10%);
 }

Chartist js 在 x 轴上旋转标签

chartist js rotate labels on x-axis

chartist.js