2016-11-23 32 views
0

githubで発生した問題に基づいて、軸ラベルをどのように回転させるかを示すjs fiddleを設定しました。下の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

exemple:

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/

今や長いテキストを扱う...

関連する問題