Question

我一直在使用Morris.js并设置了xkey。 Jan, Feb, Mar, Apr, May, Jun, Jul, Aug, Sept, 'Oct', Nov, Dec

我正在使用bootstrap col-lg-6

<div class="col-lg-6 col-md-6 col-sm-12 col-xs-12">
<div class="panel panel-default">
    <div class="panel-heading"></div>
    <div class="panel-body">
        <div id="bar-example"></div>
    </div>  
</div>
</div>

<script type="text/javascript">
$( document ).ready(function() {
    Morris.Bar({
      element: 'bar-example',
      resize: true,
      stacked: true,
      grid: true,
      gridTextSize: 10,
      data: [
        { m: 'Jan', a: 1},
        { m: 'Feb', a: 2},
        { m: 'Mar', a: 3},
        { m: 'Apr', a: 4},
        { m: 'May', a: 5},
        { m: 'Jun', a: 15},
        { m: 'Jul', a: 7},
        { m: 'Aug', a: 8},
        { m: 'Sept', a: 9},
        { m: 'Oct', a: 10},
        { m: 'Nov', a: 11},
        { m: 'Dec', a: 12}
        ],
        xkey: 'm',
        ykeys: ['a'],
        labels: ['New Users']
    });
}); 
</script>

但由于某种原因，当我使用较小的引导列时，条形图不会显示所有xkey

x键。 , Feb, , Apr, , Jun, , Aug, , Nov, Dec

似乎错过了较小的引导列中的一些月份

以下是codepen示例Code View和Full View

问题如果有更小的条形图来显示所有xkey，怎么可能？

Answer 1

这是一个令人沮丧的问题，没有真正的解决方案，但你可以试试这个：

将xLabelAngle: 60添加到您的Morris选项中：

Morris.Bar({
      ...
      xLabelAngle: 60,
      ...
});

这将转动标签角度，迫使Morris渲染xkeys。出于某种原因，它解释较小的宽度意味着xkeys的空间不足，即使我们可以清楚地看到所有的xkeys都有足够的空间。

另一种选择是减少gridTextSize虽然我在你的CodePen中尝试过，但不推荐它，因为xkeys不易读。

Morris.js条形图没有显示evey xkey

1 个答案: