Диаграмма CanvasJS неправильно отображается с контейнером слайд-шоу / карусели - PullRequest
Новая
       26

Диаграмма CanvasJS неправильно отображается с контейнером слайд-шоу / карусели

0 голосов
/ 17 апреля 2019

Я пытаюсь сделать слайд-шоу / карусель с круговыми диаграммами. Графики загружаются при загрузке страницы, но отображается только одна.

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

Это не использует PHP или что-либо в этом роде, только javascript, html, css и framework canvasjs. Я пытался установить фиксированный размер графиков, но при загрузке следующего он просто игнорирует все установленные мной правила.

Вот код: 

/*--------- function that creates the charts ----------*/
function criaGrafico(id, valores, tp) {
  setInner(id, '');
  if (valores == '') return;

  var dados = new Array;
  var title = {
    text: '',
  };
  var legenda = {
    fontSize: "14",
    verticalAlign: "bottom",
    horizontalAlign: "left",
    fontFamily: "sans-serif",
    itemWrap: false
  };

  dados[0] = {
    dataPoints: new Array,
    indexLabelFontSize: 10,
    indexLabelFontFamily: "sans-serif",
    indexLabelFontColor: "darkgrey",
    indexLabelLineColor: "darkgrey",
    indexLabelPlacement: "outside",
    indexLabelMaxWidth: 60,
    type: tp,
    showInLegend: false, // true mmm
    legendMarkerType: 'square'
  };

  var opc = {
    title: title,
    legend: legenda,
    data: dados
  };
  var chart = new CanvasJS.Chart(id, opc);
  var campo = '';
  for (var i = 0, lt = valores.length; i < lt; i++) {
    campo = valores[i].split("|");

    chart.options.data[0].dataPoints.push({
      y: Decimal(campo[0]),
      legendText: campo[4],
      indexLabel: campo[2],
      toolTipContent: campo[1],
      color: campo[3]
        /*,click:function(e){clicouGrafico(e)}*/
      ,
      cursor: "pointer"
    });
  }
  chart.render();
}

/* function that sets the parameters for the chart */
function graficoProj1() {
  var val = new Array();
  val[0] = '71|Finalizadas: 87 (71%)|Fin|green|Finalizadas';
  val[1] = '9|Direcionadas: 12 (9%)|Dir|orange|Direcionadas';
  val[2] = '18|Iniciadas: 22 (18%)|Ini|blue|Iniciadas';

  criaGrafico('chart_inov3', val, "pie");
}
#chart_inov3 {
  margin-left: 15px;
  z-index: 0;
  position: relative;
}
<div class="slideshow-container">
  <div class="projSlides fade">
    <div class='col-d-4 col-t-4'>
      <div id='chart_container' style="height: 170px; width: 170px;">
        <div id="chart_inov3"></div>
      </div>
    </div>
    <!-- some other info that would stay besides the chart, 
      in the same parent container -->
  </div>
</div>

Затем функция graficoProj1 вызывается при загрузке окна вместе с другими графиками, которые войдут в слайд-шоу, такими как graficoProj2 и graficoProj3.

Результатом должна быть диаграмма, которая остается внутри своего собственного контейнера, например:

enter image description here

Однако, когда я нажимаю кнопку «Далее» вправо, чтобы отобразить следующий слайд, другой график отображается следующим образом:

enter image description here

EDIT: Я подозреваю, что это может быть связано с тем, как я отображаю контейнеры слайд-шоу, поскольку они сначала устанавливаются как display: none, а затем становятся display: block при фокусировке. Это может привести к тому, что диаграммы не будут правильно отображаться в своем контейнере, поскольку они не отображаются. Повторная визуализация может решить эту проблему, но я все еще не могу понять, как это сделать.

Кто-нибудь имеет представление о том, что может быть причиной этого?

1 Ответ

0 голосов
/ 18 апреля 2019

Я уже исправил это, забыл обновить. Проблема была в функции JavaScript "showSlide" (которой не было в этом посте). Когда они скрыты, графики не отображаются, поэтому мне просто нужно вызвать функцию визуализации после отображения display: block.

...