bxSlider 最后一张幻灯片为空

Question

我在现有应用程序中集成了 bxSlider，显示了三个不同的幻灯片。 每张幻灯片都包含一个 HTML 画布，该画布会定期使用新的 JCharts 图表进行更新。 它完美无缺！只有...最后一张幻灯片确实出现了，但不显示画布的内容。

使用了以下 bxSlider 元素。在这种情况下，id 为loadedClassesLineChart 的画布是showm，但不显示图形。当我改变

的顺序时

标记最后一个画布的内容未显示（尽管画布显示为分页器，显示为 3 个点）

<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 : 不同的值
• adaptiveHeight: 假

可在 FireFox、Safari 和 Opera 上重现

有人能帮我解决这个问题吗？

Answer 1

问题是，插件bxslider 克隆了一些以画布为子元素的元素（<li></li>）。因此，新克隆元素内的画布不使用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

Answer 2

或者简单地设置 onSlideAfter reload where 3000 mean time 等待多久重新加载从开始（infinitiLoop 必须为 false）：

infiniteLoop: false,
onSlideAfter: function(){
   setTimeout(function(){_this.reloadSlider()},3000);
    }