jQuery flot пирог изменить размер - PullRequest
Новая
       14

jQuery flot пирог изменить размер

0 голосов
/ 31 января 2012

У меня работает функция изменения размера, но когда я сначала использую круговую диаграмму, все равно oke, но когда я изменяю размер контейнера, я получаю большую квадратную диаграмму вместо круглого пирога.

Как это можно исправить?

Код 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 или что-то в этом роде, она работает правильно, но я хочу, чтобы она могла изменять размер диаграммы

1 Ответ

2 голосов
/ 31 января 2012

Ну, вы пытались поместить рендеринг диаграммы в функцию с параметрами "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
    }
}); 
}
...