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

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

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