Question

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

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轴上旋转标签

2 个答案: