jQuery Flot Pie调整大小 [英] jQuery flot pie resize

问题描述

我已经完成了调整大小的工作，但是当我第一次使用饼形图时，一切都好了，但是当我调整容器的大小时，我得到了一个大的方形图，而不是圆形饼图.

I have got the resize thing working but when i use the pie chart at first everyting is oke but when i resize the container i get a big sqaure chart instead of the round pie.

这怎么可能解决?

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

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

When i set the width to 250px or someting then its working correct but i want that it be able to resize the chart

推荐答案

好吧，您是否尝试过在您说过要创建的调整大小函数中将图表呈现放入参数为"width"和"height"的函数中? . 因此，每次触发调整大小功能时，它也会触发图形渲染.确保您先破坏图形，然后再重新渲染.

Well, have you tried to put the chart rendering into a function with parameters "width" and "height" in the resize function you said you managed to create?. So, every time your resize function is triggered, it will also trigger the graphic rendering. Make sure you destroy your graphic before rendering again.

类似这样的东西:

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

这篇关于jQuery Flot Pie调整大小的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！