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'
    });
}

- Aaron

Answer 1

对我有效的解决方案是增加svg标签的大小。

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

- emamut

Answer 2

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

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

- Shadwell

---

谢谢，我花了很多时间寻找如何在轴禁用时删除空格的方法。你的设计解决了我的问题！ - nosensus

Answer 3

尝试将（目前未记录的）xLabelMargin选项更改为较小的值-它设置了x轴标签之间的最小间距。如果标签距离间距更近，则不会被绘制。

例如：

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

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

- YoungStacker

Answer 4

如果在指令内部，您可以使用以下内容：

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

- user1240792

Answer 5

像下面这样的简单加法操作

<div id="chart"></div>

并为上面的div添加样式，如下：

#chart{
  height:400px;
}

- Rahul Bhatia