Morris.js条形图不显示

Question

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

我使用的是引导-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

它似乎错过了几个月的时候，当在较小的列引导

下面是代码依赖示例代码视图和完整视图

问题，当有较小的条形图显示所有的xkey时，怎么可能？

Answer 1

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

将xLabelAngle: 60添加到莫里斯选项中：

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

这将改变标签角，这将迫使Morris呈现xkey。由于某些原因，它将较小的宽度解释为xkey的空间不足，尽管我们可以清楚地看到所有xkey都有足够的空间。

另一种选择是减少gridTextSize，尽管我在您的CodePen中尝试过它，并且不推荐它，因为xkey是不可辨认的。