2016-11-23 98 views
0

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

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%的宽度

回答

3

这里的为例:

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/

现在用长文本工作...