Morris.JS X轴标签高度

Question

我使用Morris.JS生成了一个图表，但由于显示标签的区域高度有限，因此x轴上的标签会变长并被切断。

下面的代码将呈现一个图表，它只显示“COUNTY PARK ROAD ELEM”的部分标签。如何调整标签区域的高度以显示整个文本？

的代码如下

if ($('#IP1').length){ 

    Morris.Bar({ 
     element: 'IP1', 
     data: [   
      {x: 'COUNTY PARK ROAD ELEM.', yIndex: 376.92}     
     ], 
     xkey: 'x', 
     ykeys: ['yIndex'], 
     labels: ['Index Points'], 
     ymax: 500, 
     barRatio: 0.2, 
     xLabelAngle: 45, 
     hideHover: 'auto' 
    }); 
} 

Answer 1

为我工作的解决方案是增加SVG标签

$('svg').height(700); 

Answer 2

的大小，如果一个指令里面，你可以使用以下命令：

//in pixels 
var heightToAdd = 30;  
var svg = element.find("svg")[0]; 
svg.height.baseVal.value += heightToAdd; 

Answer 3

除了增加包含图形的元素的高度外，还可以设置填充选项n在您的Morris.Bar上为x轴上的标签提供更多空间。

Morris.Bar({ 
    ... 
    padding: 50, 
    ... 
}); 

Answer 4

尝试改变（目前未记录的）xLabelMargin选项为一个较小的值 - 它设置在x轴标签之间的最小裕量。如果标签比边距更近，则不会绘制标签。

如：

Morris.Bar({ 
    // ... 
    xLabelMargin: 10 
}) 

https://github.com/morrisjs/morris.js/issues/235