bxSlider最后一张幻灯片为空

时间:2014-10-30 22:08:32

标签: javascript jquery bxslider

我在现有应用程序中集成了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:false
    • slideWidth:200
    • minSlides:不同的值
    • maxSlides:不同的值
    • adaptiveHeight:false

    可在FireFox,Safari和Opera上重现

    任何人都可以帮我解决这个问题吗?

  • 2 个答案:

    答案 0 :(得分:1)

    问题是,插件bxslider克隆了一些将canvas作为子元素的元素(<li></li>)。因此,新克隆元素中的画布使用ChartJS

    初始化 NOT

    我已经修改了一些代码以支持这一点。

    // 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

    答案 1 :(得分:1)

    或简单地设置onSlideAfter reload,其中3000平均时间等待从开始重新加载多长时间(infinitiLoop必须为false):

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