我已将 bxSlider 集成到现有应用程序中,显示三张不同的幻灯片。 每张幻灯片都包含一个 HTML Canvas ,该 Canvas 会定期更新为新的 JCharts 图表。 它工作完美!只是...最后一张幻灯片确实出现了,但没有显示 Canvas 的内容。
使用以下 bxSlider 元素。在这种情况下,显示 ID 为 loadClassesLineChart 的 Canvas ,但不显示图形。当我更改
<ul class="bxslider" id="rdstats">
<li><p style="background-color:rgb(231, 239, 252);margin-top: -4px;font-weight: bold;padding:6px 6px 6px 6px;">Average CPU Load/CPUs</p><br/>
<canvas id="cpuLoadRadarChart" width="200" height="200" style="margin: 0px 0px 0px 0px;"></canvas>
</li>
<li><p style="background-color:rgb(231, 239, 252);margin-top: -4px;font-weight: bold;padding:6px 6px 6px 6px;">Heapsize allocation</p><br/>
<canvas id="heapSizeStackedBarChart" width="200" height="200" style="margin: 0px 0px 0px 0px;"></canvas>
</li>
<li><p style="background-color:rgb(231, 239, 252);margin-top: -4px;font-weight: bold;padding:6px 6px 6px 6px;">Loaded classes</p><br/>
<canvas id="loadedClassesLineChart" width="200" height="200" style="margin: 0px 0px 0px 0px;"></canvas>
</li>
</ul>
添加额外的空 <li> </li>
时最后</li>
之后显示所有三个图表并显示第四张空幻灯片。
bxSlider使用文档准备功能启动。
$(document).ready(function() {
$('#rdstats').each(function() {
var _this = $(this).bxSlider({
controls: false,
auto: true,
autoHover: true,
minSlides: 1,
maxSlides: 1,
adaptiveHeight: true,
slidewidth: 200,
slideMargin: 2});
_this.mouseenter(function() {
_this.stopAuto();
}).mouseleave(function() {
_this.startAuto();
});
});
我尝试过的;
- UseCSS:假
- 幻灯片宽度:200
- minSlides:不同的值
- maxSlides:不同的值
- 自适应高度:假
可在 FireFox、Safari 和 Opera 上重现
有人能帮我解决这个问题吗?
最佳答案
问题是插件bxslider
克隆一些以 canvas 为子元素的元素( <li></li>
)。因此,新克隆元素内的 Canvas 不使用 ChartJS
进行初始化。
我稍微修改了代码来支持这一点。
// Refreshes bxslider with id "rdstats" with new data.
function refreshcpuLoadRadarChart() {
// Replace the chart canvas element
$('.cpuLoadRadarChart').replaceWith('<canvas class="cpuLoadRadarChart" width="200" height="200" style="margin: 0px 0px 0px 0px;"></canvas>');
// Get the context of the canvas element we want to select
var ctx = $('.cpuLoadRadarChart').get(0).getContext("2d");
new Chart(ctx).Radar({"labels":["10:54","10:55","10:56","10:57","10:58","10:59","11:00","11:01","11:02","11:03","11:04","11:05","11:06","11:07","11:08","11:09"],"datasets":[{"label":"myserver","fillColor":"rgba(165,222,11,0.2)","strokeColor":"rgba(165,222,11,1)","pointColor":"rgba(165,222,11,1)","pointStrokeColor":"#fff","pointHighlightFill":"#fff","pointHighlightStroke":"rgba(165,222,11,1)","data":[0.03,0.01,0.2,0.53,0.34,0.2,0.43,0.28,0.17,0.28,0.24,0.32,0.2,0.45,0.42,0.15]}]}, {
responsive: true,
animation: false,
tooltipFontSize: 10,
tooltipTitleFontSize: 10,
tooltipXOffset: 5,
scaleOverride: true,
scaleShowLabels: true,
scaleSteps: 6,
scaleStepWidth: 0.5,
scaleStartValue: 0,
scaleFontSize: 10
});
setTimeout(function () {
refreshcpuLoadRadarChart();
}, 30000);
}
// Refreshes bxslider with id "rdstats" with new data.
function refreshHeapUsageBarChart() {
$('.heapSizeStackedBarChart').replaceWith('<canvas class="heapSizeStackedBarChart" width="200" height="200" style="margin: 0px 0px 0px 0px;"></canvas>');
$('.heapSizeStackedBarChart').each(function(pos,value){
var ctx = $(value).get(0).getContext("2d");
new Chart(ctx).StackedBar({"labels":["myserver","myserver2","myserver3"],"datasets":[{"label":"Free %","fillColor":"rgba(255,255,255,0.7)","strokeColor":"rgba(255,255,255,1)","pointColor":"rgba(255,255,255,1)","pointStrokeColor":"rgba(255,255,255,1)","pointHighlightFill":"rgba(255,255,255,1)","pointHighlightStroke":"rgba(255,255,255,1)","data":[50,50,50]},{"label":"Tenured Comm not Used%","fillColor":"rgba(165,222,11,0.7)","strokeColor":"rgba(165,222,11,1)","pointColor":"rgba(165,222,11,1)","pointStrokeColor":"rgba(165,222,11,1)","pointHighlightFill":"rgba(165,222,11,1)","pointHighlightStroke":"rgba(165,222,11,1)","data":[14,14,14]},{"label":"Tenured Used%","fillColor":"rgba(199,193,1,0.7)","strokeColor":"rgba(199,193,1,1)","pointColor":"rgba(199,193,1,1)","pointStrokeColor":"rgba(199,193,1,1)","pointHighlightFill":"rgba(199,193,1,1)","pointHighlightStroke":"rgba(199,193,1,1)","data":[21,21,21]},{"label":"Survivor Comm not Used%","fillColor":"rgba(227,158,3,0.7)","strokeColor":"rgba(227,158,3,1)","pointColor":"rgba(227,158,3,1)","pointStrokeColor":"rgba(227,158,3,1)","pointHighlightFill":"rgba(227,158,3,1)","pointHighlightStroke":"rgba(227,158,3,1)","data":[1,1,1]},{"label":"Survivor Used%","fillColor":"rgba(246,120,15,0.7)","strokeColor":"rgba(246,120,15,1)","pointColor":"rgba(246,120,15,1)","pointStrokeColor":"rgba(246,120,15,1)","pointHighlightFill":"rgba(246,120,15,1)","pointHighlightStroke":"rgba(246,120,15,1)","data":[0,0,0]},{"label":"Eden Comm not Used%","fillColor":"rgba(254,83,38,0.7)","strokeColor":"rgba(254,83,38,1)","pointColor":"rgba(254,83,38,1)","pointStrokeColor":"rgba(254,83,38,1)","pointHighlightFill":"rgba(254,83,38,1)","pointHighlightStroke":"rgba(254,83,38,1)","data":[11,11,11]},{"label":"Eden Used%","fillColor":"rgba(251,50,68,0.7)","strokeColor":"rgba(251,50,68,1)","pointColor":"rgba(251,50,68,1)","pointStrokeColor":"rgba(251,50,68,1)","pointHighlightFill":"rgba(251,50,68,1)","pointHighlightStroke":"rgba(251,50,68,1)","data":[3,3,3]}]}, {
responsive: true,
animation: false,
scaleSteps: 10,
scaleStepWidth: 10,
scaleStartValue: 0,
scaleOverride: true,
tooltipXOffset: -25,
tooltipFontSize: 10,
tooltipTitleFontSize: 10
});
})
setTimeout(function () {
refreshHeapUsageBarChart();
}, 30000);
}
// Refreshes bxslider with id "rdstats" with new data.
function refreshLoadedClassesLineChart() {
// Replace the chart canvas element
$('.loadedClassesLineChart').replaceWith('<canvas class="loadedClassesLineChart" width="200" height="200" style="margin: 0px 0px 0px 0px;"></canvas>');
var ctx = $('.loadedClassesLineChart').get(0).getContext("2d");
new Chart(ctx).Line({"labels":["10:55","10:56","10:57","10:58","10:59","11:00","11:01","11:02","11:03","11:04","11:05","11:06","11:07","11:08","11:09","11:10"],"datasets":[{"label":"myserver","fillColor":"rgba(165,222,11,0.2)","strokeColor":"rgba(165,222,11,1)","pointColor":"rgba(165,222,11,1)","pointStrokeColor":"#fff","pointHighlightFill":"#fff","pointHighlightStroke":"rgba(165,222,11,1)","data":[15617,15617,15617,15617,15617,15617,15617,15617,15617,15617,15617,15617,15617,15617,15617,15617]}]}, {
responsive: true,
animation: false,
tooltipFontSize: 10,
tooltipTitleFontSize: 10,
tooltipXOffset: 5,
scaleShowLabels: true,
scaleFontSize: 10
});
setTimeout(function () {
refreshLoadedClassesLineChart();
}, 30000);
}
$(document).ready(function () {
console.log('document ready');
$('.bxslider').bxSlider({
controls: false,
auto: true,
autoHover: true,
minSlides: 1,
maxSlides: 1,
adaptiveHeight: true,
slidewidth: 200,
slideMargin: 2,
onSliderLoad: function(){
refreshcpuLoadRadarChart();
refreshHeapUsageBarChart();
refreshLoadedClassesLineChart();
}
});
});
看看这个 fiddle
关于javascript - bxSlider 最后一张幻灯片为空,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/26664180/