Morris.js 条形图未显示每个 xkey

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>

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

xkey。 , Feb, , Apr, , Jun, , Aug, , Nov, Dec

在 bootstrap

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

这是代码笔示例Code View and Full View

Question How is it possible when have smaller bar chart to display all of the xkey?

Answer 1

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

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

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

这将改变标签角度，迫使 Morris 渲染 xkey。出于某种原因，它会将较小的宽度解释为 xkey 缺少 space，即使我们可以清楚地看到所有 xkey 都有足够的空间。

另一个选项是减少 gridTextSize，虽然我在你的 CodePen 中试过了，但不推荐它，因为 xkeys 不清晰。

Morris.js 条形图未显示每个 xkey

Morris.js bar chart not displaying evey xkey

javascript

morris.js