2014-11-24 135 views
3

我解析從JSON結構值成莫里斯JS條形圖。 JSON值通過Ajax加載。問題是隻有每秒鐘的值被加載到x行(xkeys)中。Morris.js條形圖缺少標籤

我的代碼:

<script> 
    $(document).ready(function() { 
    $.ajax({ 
     url: "http://intra.site.com/_vti_bin/ListData.svc/ExchangeRates?$orderby=Modified%20desc", 
     headers: { 'accept': 'application/json;odata=verbose', 'content-type': 'application/json;odata=verbose'}, 
     success: function(data){ 
        var params = { 
         element: 'myfirstchart', 
         data: [], 
         xkey: 'year', 
         ykeys: ['value'], 
         barColors: ['#f46813'], 
         labels: ['Rate'] 
            }; 



         data.d.results.forEach(function(element) { 
         var obj = { "year": element.ExchangeCross, "value": element.ApprovedRate }; 
         params.data.push(obj); 
        }); 

        Morris.Bar(params); 

           } 
      }); 
}); 
</script> 

圖表呈現細,但有些標籤丟失。我已經截圖了。

Link to image

如何解決這個有什麼建議?

+0

我有完全相同的問題,你有沒有修好它? – 2014-12-23 13:04:59

+0

你也可以嘗試從http://stackoverflow.com/questions/19715304/morris-js-x-axis-label-height設置xLabelMargin – tennisBoy 2016-06-12 06:04:59

+0

,你也可以嘗試從http://stackoverflow.com/questions/19715304設置xLabelMargin /莫里斯-JS-x軸標籤高度 – tennisBoy 2016-06-12 06:05:01

回答

7

莫里斯這樣做是因爲沒有足夠的空間用於標籤。 嘗試給標籤添加一個角度,然後你就可以再次看到它們。

var params = { 
    element: 'myfirstchart', 
    data: [], 
    xkey: 'year', 
    ykeys: ['value'], 
    barColors: ['#f46813'], 
    labels: ['Rate'], 
    xLabelAngle: 60, 
};