添加新的jqPlot圖動態div使舊的空的

Question

我有一個div（溢出：自動），我動態地添加內部div在一段時間後。當添加一個新的時，它被添加到開始。內部的div中的每一個都有一個jqPlot圖表，只要有只有一個能正常工作，但只要另一格添加兩件事情的發生是由於舊的（S）：

1. 圖表在div中進一步下移。
2. 圖表沒有圖表或背景（雖然它有軸標記）。

根據開發人員工具，所有畫布都放置正確，但它們都是空的。這是用來添加新的圖表代碼（chart_div_存在？）：

$.jqplot('chart_div_' + chartCounter, sold_plot, { 
    seriesColors: [ "#30D2FF", "BFFFCB", "BFFFCB", "BFFFCB" ], 
    seriesDefaults: { 
     showMarker: false, 
     markerOptions: { 
      show: false, 
     } 
    }, 
    axes: { 
     xaxis: { 
      renderer: $.jqplot.DateAxisRenderer, 
      min: plot_min, 
      max: plot_max, 
     } 
    }, 
    grid: { 
     background: '#444444', 
    }, 
}); 
chartCounter++; 

難道是與移動印刷品嗎？我試圖重繪它，但它不起作用。

Answer 1

這裏是它可以幫助您的例子：Jsfiddle Link

HTML：

<div id="main"> 
    <div id="chart1" style="margin-top:20px; margin-left:20px;"></div> 
</div> 
<a href="#" class="topopup">Click Here Trigger</a> 

的Javascript：

$(document).ready(function() { 
    $.jqplot.config.enablePlugins = true; 
    var chartData = [ 
     ["19-Jan-2012", 2.61], 
     ["20-Jan-2012", 5.00], 
     ["21-Jan-2012", 6.00] 
    ]; 
    var cnt = 1; 
    // add a custom tick formatter, so that you don't have to include the entire date renderer library. 
    $.jqplot.DateTickFormatter = function (format, val) { 
     // for some reason, format isn't being passed through properly, so just going to hard code for purpose of this jsfiddle 
     val = (new Date(val)).getTime(); 
     format = '%b&nbsp%#d' 
     return $.jsDate.strftime(val, format); 
    }; 

    function PlotChart(chartData, extraDays, elem) { 

     var plot2 = $.jqplot(elem, [chartData], { 
      title: 'Mouse Cursor Tracking', 
      seriesDefaults: { 
       renderer: $.jqplot.BarRenderer, 
       rendererOptions: { 
        barPadding: 1, 
        barWidth: 50 
       }, 
       pointLabels: { 
        show: true 
       } 
      }, 
      axes: { 
       xaxis: { 
        pad: 1, 
        // a factor multiplied by the data range on the axis to give the    
        renderer: $.jqplot.CategoryAxisRenderer, 
        // renderer to use to draw the axis,  
        tickOptions: { 
         formatString: '%b %#d', 
         formatter: $.jqplot.DateTickFormatter 
        } 
       }, 
       yaxis: { 
        tickOptions: { 
         formatString: '$%.2f' 
        } 
       } 
      }, 
      highlighter: { 
       sizeAdjust: 7.5 
      }, 
      cursor: { 
       show: true 
      } 
     }); 
    } 

    PlotChart(chartData, 3, "chart1"); 


    $("a.topopup").click(function() { 
     loading(); 
     return false; 
    }); 



    function loading() { 
     var div = $("#main"); 
     cnt = cnt + 1; 
     var elemId = "chart" + cnt; 
     div.prepend("<div id='" + elemId + "'></div>"); 
     PlotChart(chartData, 3, elemId); 
    } 

});