Morris.js條形圖不顯示evey xkey

我一直在使用Morris.js並設置了xkey。 Jan, Feb, Mar, Apr, May, Jun, Jul, Aug, Sept, 'Oct', Nov, DecMorris.js條形圖不顯示evey xkey

我使用的引導COL-LG-6樣

<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>

但由於某些原因，當我使用引導條形圖不顯示所有x鍵

x鍵的小列。 , Feb, , Apr, , Jun, , Aug, , Nov, Dec

似乎錯過一些月份的自舉

這裏的小列時是codepen例如Code View和Full View

問題怎麼可能有較小的條形圖時顯示所有的xkey？

來源

2016-08-20 user4419336

這一直沒有真正解決一個令人沮喪的問題，但你可以試試這個：

添加xLabelAngle: 60你莫里斯選項：

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

這將打開標籤的角度，它的力量Morris渲染xkeys。出於某種原因，它將較小的寬度解釋爲xkeys的空間不足，即使我們可以清楚地看到所有xkeys都有足夠的空間。

另一種選擇是減少gridTextSize，儘管我在CodePen中嘗試過它，並且不推薦它，因爲xkeys不可讀。

來源

2016-08-20 23:04:06 adriennetacke

Morris.js條形圖不顯示evey xkey

回答

相關問題