Диаграмма Морриса внутри аккордеона не отображается должным образом - PullRequest
Новая
       15

Диаграмма Морриса внутри аккордеона не отображается должным образом

0 голосов
/ 12 мая 2019

Диаграмма Морриса в аккордеоне начальной загрузки 4 не работает должным образом.

Я изучаю бутстрап 4 и тестирую диаграммы Морриса с бутстрапом и могу заставить его работать идеально. Но когда я пытаюсь поместить диаграмму в аккордеон, диаграмма не отображается должным образом и отображается, когда я изменяю размер окна. Я попробовал много предложений от сообщества, и ни одно из них, кажется, не работает. Пытался использовать опцию show.bs.collapse, но безуспешно. Ниже приведен код. Спасибо за помощь 

<!DOCTYPE html>
<html lang="en">
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>

<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/morris.js/0.5.1/morris.css">
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/raphael/2.1.0/raphael-min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/morris.js/0.5.1/morris.min.js"></script>
</head>
<body>

  <div class="container">

  <div id="accordion">
    <div class="card">
      <div class="card-header">
        <a class="card-link" data-toggle="collapse" href="#collapseOne">
          Collapsible Group Item #1
        </a>
      </div>
      <div id="collapseOne" class="collapse show" data-parent="#accordion">
        <div class="card-body">
          <div id="area-chart" ></div>
        </div>
      </div>
    </div>
    <div class="card">
      <div class="card-header">
        <a class="collapsed card-link" data-toggle="collapse" href="#collapseTwo">
        Collapsible Group Item #2
      </a>
      </div>
      <div id="collapseTwo" class="collapse" data-parent="#accordion">
        <div class="card-body">
         <div id="line-chart"></div>
        </div>
      </div>
    </div>
    <div class="card">
      <div class="card-header">
        <a class="collapsed card-link" data-toggle="collapse" href="#collapseThree">
          Collapsible Group Item #3
        </a>
      </div>
      <div id="collapseThree" class="collapse" data-parent="#accordion">
        <div class="card-body">
       <div id="bar-chart" ></div>
        </div>
      </div>
    </div>
  </div>
</div>

</body>
<script type="text/javascript">
  var data = [
      { y: '2014', a: 50, b: 90},
      { y: '2015', a: 65,  b: 75},
      { y: '2016', a: 50,  b: 50},
      { y: '2017', a: 75,  b: 60},
      { y: '2018', a: 80,  b: 65},
      { y: '2019', a: 90,  b: 70},
      { y: '2020', a: 100, b: 75},
      { y: '2021', a: 115, b: 75},
      { y: '2022', a: 120, b: 85},
      { y: '2023', a: 145, b: 85},
      { y: '2024', a: 160, b: 95}
    ],
    config = {
      data: data,
      xkey: 'y',
      ykeys: ['a', 'b'],
      labels: ['Total Income', 'Total Outcome'],
      fillOpacity: 0.6,
      hideHover: 'auto',
      behaveLikeLine: true,
      resize: true,
      pointFillColors:['#ffffff'],
      pointStrokeColors: ['black'],
      lineColors:['gray','red']
  };
config.element = 'area-chart';
Morris.Area(config);
config.element = 'line-chart';
Morris.Line(config);
config.element = 'bar-chart';
Morris.Bar(config);

</script>
</html>

1 Ответ

0 голосов
/ 14 июля 2019

Это типичная проблема Морриса, когда соответствующая диаграмма скрыта, его размеры основного элемента не такие большие, как.Если с отображением карты аккордеона связано событие, вы можете использовать строки кода ниже (этот пример для диаграммы области), чтобы изменить размер <svg> на <div id='area-chart'>

$('#area-chart svg').css({width: $('#area-chart').width() });
$('#area-chart svg').css({height: $('#area-chart').height() });
...