Morris.js Balkendiagramm nicht angezeigt evey xkey

Question

Ich habe Morris.js verwendet und xkey festgelegt. Jan, Feb, Mar, Apr, May, Jun, Jul, Aug, Sept, 'Oct', Nov, Dec

Ich bin mit Bootstrap-col-lg-6 wie

<div class="col-lg-6 col-md-6 col-sm-12 col-xs-12"> 
<div class="panel panel-default"> 
    <div class="panel-heading"></div> 
    <div class="panel-body"> 
     <div id="bar-example"></div> 
    </div> 
</div> 
</div> 

<script type="text/javascript"> 
$(document).ready(function() { 
    Morris.Bar({ 
     element: 'bar-example', 
     resize: true, 
     stacked: true, 
     grid: true, 
     gridTextSize: 10, 
     data: [ 
     { m: 'Jan', a: 1}, 
     { m: 'Feb', a: 2}, 
     { m: 'Mar', a: 3}, 
     { m: 'Apr', a: 4}, 
     { m: 'May', a: 5}, 
     { m: 'Jun', a: 15}, 
     { m: 'Jul', a: 7}, 
     { m: 'Aug', a: 8}, 
     { m: 'Sept', a: 9}, 
     { m: 'Oct', a: 10}, 
     { m: 'Nov', a: 11}, 
     { m: 'Dec', a: 12} 
     ], 
     xkey: 'm', 
     ykeys: ['a'], 
     labels: ['New Users'] 
    }); 
}); 
</script> 

Aber aus irgendeinem Grund, wenn ich mit kleineren Spalten der Balkendiagramm Bootstrap nicht alle der

xkey xkey anzuzeigen. , Feb, , Apr, , Jun, , Aug, , Nov, Dec

Es scheint

Hier sind einige der Monate, wenn in kleineren Spalten von Bootstrap zu verpassen ist das codepen Beispiel Code View und Full View

Frage Wie es möglich ist, wenn kleinere Balkendiagramm haben alle xkey anzeigen?

Answer 1

Dies hat ein frustrierendes Problem ohne wirkliche Lösung gewesen, aber man kann versuchen, diese:

xLabelAngle: 60 zu Ihren Morris Optionen hinzufügen:

Morris.Bar({ 
     ... 
     xLabelAngle: 60, 
     ... 
}); 

Dies dieses Etikett Winkel drehen wird, die Kräfte Morris, um die xkeys zu rendern. Aus irgendeinem Grund interpretiert es kleinere Breiten als einen Platzmangel für die x-Tasten, obwohl wir deutlich sehen können, dass genug Platz für alle x-Tasten ist.

Eine weitere Option ist die gridTextSize zu verringern, obwohl ich es in Ihrem CodePen versuchte und nicht empfehle, da die xkeys nicht lesbar sind.