jQuery flot pieresize

我有resize的工作，但是当我使用饼图时，每个人都是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 '
'+label+': '+Math.round(series.percent)+'%
'; }, background: { opacity: 0.5, color: '#000' } } } }, legend: { show: false }, grid: { hoverable: false, autoHighlight: false } }); }); 

当我将宽度设置为250px或某些时，它的工作正确，但我希望它能够调整图表的大小

Answer 1

好吧，你试过把图表渲染放到一个函数中，参数“width”和“height”在你说你设法创建的resize函数中吗？ 因此，每次触发resizefunction时，它也会触发图形渲染。 确保在再次渲染之前销毁图形。

像这样的东西：

 $(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 '
'+label+': '+Math.round(series.percent)+'%
'; }, background: { opacity: 0.5, color: '#000' } } } }, legend: { show: false }, grid: { hoverable: false, autoHighlight: false } }); }