CanvasJS 图表无法使用 slideshow/carousel 容器正确呈现
CanvasJS chart not rendering properly with slideshow/carousel container
我正在尝试制作一个带有饼图的 Slideshow/carousel。图表在页面加载时加载,但一次只显示一个。
问题是,当我将幻灯片放映到一边以显示第二个图表时,它没有在其容器内呈现,而是占据了祖父母的整个 space。具体来说,第一个呈现的图表大小正确,任何其他图表都是错误的。
这不使用任何 PHP 或任何类似的东西,只使用 javascript、html、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>
然后,当 window 加载时调用函数 graficoProj1
,以及将进入幻灯片的其他图表,如 graficoProj2 和 graficoProj3。
结果应该是一个保留在自己容器内的图表,如下所示:
但是,当我向右按 "Next" 按钮显示下一张幻灯片时,另一个图表呈现如下:
编辑:
我怀疑这可能与我显示幻灯片容器的方式有关,因为它们首先设置为 display: none
,然后在聚焦时变为 display: block
。这可能会导致图表无法在其容器内正确呈现,因为它们未显示。重新渲染它们可能会解决这个问题,但我仍然不知道该怎么做。
有人知道是什么原因造成的吗?
我已经修好了,忘记更新了。问题出在 "showSlide" javascript 函数中(不在 post 中)。隐藏时,图表不会呈现,所以我只需要在 display: block
显示后调用呈现函数。
我正在尝试制作一个带有饼图的 Slideshow/carousel。图表在页面加载时加载,但一次只显示一个。
问题是,当我将幻灯片放映到一边以显示第二个图表时,它没有在其容器内呈现,而是占据了祖父母的整个 space。具体来说,第一个呈现的图表大小正确,任何其他图表都是错误的。
这不使用任何 PHP 或任何类似的东西,只使用 javascript、html、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>
然后,当 window 加载时调用函数 graficoProj1
,以及将进入幻灯片的其他图表,如 graficoProj2 和 graficoProj3。
结果应该是一个保留在自己容器内的图表,如下所示:
但是,当我向右按 "Next" 按钮显示下一张幻灯片时,另一个图表呈现如下:
编辑:
我怀疑这可能与我显示幻灯片容器的方式有关,因为它们首先设置为 display: none
,然后在聚焦时变为 display: block
。这可能会导致图表无法在其容器内正确呈现,因为它们未显示。重新渲染它们可能会解决这个问题,但我仍然不知道该怎么做。
有人知道是什么原因造成的吗?
我已经修好了,忘记更新了。问题出在 "showSlide" javascript 函数中(不在 post 中)。隐藏时,图表不会呈现,所以我只需要在 display: block
显示后调用呈现函数。