chartist.js - chartist js在x轴上旋转标签

Question

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

http://jsfiddle.net/Lnhpwn8x/22/

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/

现在可以处理长文字...