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 
    } 
}); 
}