Столбчатая диаграмма Morris.js не отображает evey xkey

1063 просмотра

1 ответ

Я использовал Morris.js и установил xkey. Jan, Feb, Mar, Apr, May, Jun, Jul, Aug, Sept, 'Oct', Nov, Dec

Я использую бутстрап 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

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

Кажется, что пропустить некоторые месяцы, когда в небольших колонках начальной загрузки

Вот пример codepen Code View и Full View

Вопрос Как это возможно, когда на гистограмме меньшего размера отображаются все xkey?

Автор: Mr. ED Источник Размещён: 08.11.2019 11:00

Ответы (1)


2 плюса

Решение

Это была неприятная проблема без реального решения, но вы можете попробовать это:

Добавьте xLabelAngle: 60к своим вариантам Морриса:

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

Это повернет угол метки, что заставит Морриса отрендерить xkeys. По какой-то причине он интерпретирует меньшую ширину как означающую нехватку места для xkeys, хотя мы можем ясно видеть, что для всех xkeys достаточно места.

Другой вариант - уменьшить значение, gridTextSizeхотя я пробовал это сделать в вашем CodePen и не рекомендую, поскольку xkeys не читаются.

Автор: adriennetacke Размещён: 20.08.2016 11:04
Вопросы из категории :
32x32