使用幻灯片放映/轮播容器无法正确呈现CanvasJS图表

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了使用幻灯片放映/轮播容器无法正确呈现CanvasJS图表相关的知识,希望对你有一定的参考价值。

我正在尝试制作带有饼图的幻灯片/旋转木马。页面加载时会加载图表,但一次只显示一个图表。

问题在于,当我将幻灯片移动到侧面以显示第二个图表时,它不会在其容器内呈现,而是占据了它祖父母的整个空间。具体来说,渲染的第一个图表是正确的大小,任何其他图表都是错误的。

这不使用任何php或任何类型的东西,只是javascripthtml,css和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

编辑:我怀疑这可能与我展示幻灯片的容器的方式有关,因为它们首先被设置为display: none然后在聚焦时它们变成display: block。这可能导致图表无法在其容器中正确呈现,因为它们未显示。重新渲染它们可能会解决这个问题,但我仍然对如何解决这个问题。

有谁知道可能导致这种情况的原因是什么?

答案

我已经修好了,忘了更新。问题出在“showSlide”javascript函数中(这篇文章中没有)。隐藏时,图表不会渲染,所以我只需在显示display: block后调用渲染函数。

以上是关于使用幻灯片放映/轮播容器无法正确呈现CanvasJS图表的主要内容,如果未能解决你的问题,请参考以下文章

使用setInterval通过JQuery暂停幻灯片放映吗?

基于原生js的图片轮播效果简单实现

Visual Composer 图像轮播无法正确循环

调整jquery css大小时的猫头鹰轮播响应裁剪宽度

PPT播放技巧

无容器控制流语法 - 模板无法使用 IE8 正确呈现