如何增加morris.js欄的寬度或增加欄之間的空間？

Question

我有這個morris.js酒吧有多個酒吧，我想改變酒吧的寬度或使持續時間之間的空間。從下面的圖像是有辦法提供更多的空間FebMarch和April或有沒有辦法調整欄的寬度？

這裏是我的代碼

Morris.Bar({ 
    element: 'morris-chart-bar', 
    data: [ 
    { y: 'Feb', a: 75, b: 60, c: 5, d: 50 },  
    { y: 'March', a: 180, b: 220, c: 140, d: 160 }, 
    { y: 'April', a: 300, b: 340, c: 350, d: 270 } 
    ], 
    xkey: 'y', 
    ykeys: ['a', 'b', 'c', 'd'], 
    labels: ['A', 'B', 'C', 'D'], 
    barColors: ['#0B62A4','#f75b68','#4DA74D','#646464'], 
    hideHover: 'auto' 
}); 

你可以測試它here

Answer 1

的API文檔的頁面似乎忽略了幾個屬性。

barGap和barSizeRatio

barGap是設定條間距單杆組中的整數：您可以通過查看源，在那裏我發現這2名男子瞭解更多。它默認爲3.增加它以進一步分隔它們，減少它們使它們靠得更近。 barSizeRatio是整個圖形給出的寬度的比例。它默認爲0.75。將數字增加到接近1以使條寬度更寬，如果條的寬度等於1，那麼條會佔據整個圖形，如果其大於1條將重疊。

Morris.Bar({ 
    barGap:4, 
    barSizeRatio:0.55, 
    element: 'morris-chart-bar', 
    data: [ 
    { y: 'Feb', a: 75, b: 60, c: 5, d: 50 },  
    { y: 'March', a: 180, b: 220, c: 140, d: 160 }, 
    { y: 'April', a: 300, b: 340, c: 350, d: 270 } 
    ], 
    xkey: 'y', 
    ykeys: ['a', 'b', 'c', 'd'], 
    labels: ['A', 'B', 'C', 'D'], 
    barColors: ['#0B62A4','#f75b68','#4DA74D','#646464'], 
    hideHover: 'auto' 
});