jQuery flot pie調整大小

Question

我已經調整大小的東西工作，但是當我首先使用餅圖的時候是oke，但是當我調整容器的大小時，我得到一個大的sqaure圖表而不是圓形的餅圖。

這怎麼解決？

的JS代碼：

$("table.chart-pie").each(function() { 
    var colors = []; 
    $("table.chart-pie thead th:not(:first)").each(function() { 
     colors.push($(this).css("color")); 
    }); 
    $(this).graphTable({ 
     series: 'columns', 
     position: 'replace', 
     width : '100%', 
     height: '250px', 
     colors: colors 
    }, { 
     series: { 
      pie: { 
       show: true, 
       pieStrokeLineWidth: 0, 
       pieStrokeColor: '#FFF', 
       radius: 100, 
       label: { 
        show: true, 
        radius: 3/4, 
        formatter: function(label, series){ 
        return '<div style="font-size:11px; padding:2px; color: #FFFFFF;"><b>'+label+'</b>: '+Math.round(series.percent)+'%</div>'; 
       }, 
        background: { 
         opacity: 0.5, 
         color: '#000' 
        } 
       } 
      } 
     }, 
     legend: { 
      show: false 
     }, 
     grid: { 
      hoverable: false, 
      autoHighlight: false 
     } 
    }); 
}); 

當我設置寬度爲250像素或成才那麼它的工作正確的，但我希望它能夠調整圖表

Answer 1

喂，你試圖把該圖表在您稱之爲設法創建的調整大小函數中將參數「width」和「height」渲染爲一個函數。 因此，每次觸發調整大小功能時，它也會觸發圖形渲染。確保在再次渲染之前銷燬圖形。

事情是這樣的：

$(window).resize(function(){ 
    var container_id = $('#your_container_id'); 
    container_id.empty(); 
    renderGraphic(container_id.width(),container_id.height()); 
}) 
function renderGraphic(gwidth,gheight){ 
    var colors = []; 
    $("table.chart-pie thead th:not(:first)").each(function() { 
    colors.push($(this).css("color")); 
    }); 
    $(this).graphTable({ 
    series: 'columns', 
    position: 'replace', 
    width : gwidth, //<- parameter width 
    height: gheight, //<- parameter height 
    colors: colors 
    }, { 
    series: { 
     pie: { 
      show: true, 
      pieStrokeLineWidth: 0, 
      pieStrokeColor: '#FFF', 
      radius: 100, 
      label: { 
       show: true, 
       radius: 3/4, 
       formatter: function(label, series){ 
       return '<div style="font-size:11px; padding:2px; color: #FFFFFF;"><b>'+label+'</b>: '+Math.round(series.percent)+'%</div>'; 
      }, 
       background: { 
        opacity: 0.5, 
        color: '#000' 
       } 
      } 
     } 
    }, 
    legend: { 
     show: false 
    }, 
    grid: { 
     hoverable: false, 
     autoHighlight: false 
    } 
}); 
}