Member 13974276 Ответов: 0

Флотская диаграмма разбита в отзывчивом виде и мобильном телефоне


Круговая диаграмма flot прекрасно работает в обычном режиме рабочего стола, но она нарушается в адаптивном режиме и на мобильных устройствах. Пожалуйста, проверьте изображения ниже

Вид рабочего стола[^]

В мобильном устройстве и отзывчивом представлении[^]

Что я уже пробовал:

Я попробовал применить CSS, обновленный плагин из GitHub, но это не помогло. Ниже приведен код
define(function(){
    return {
        init: function(selector, data)
        {
            require(['thirdparty/jquery.flot.pie', 'thirdparty/jquery.flot.tooltip.min'], function()
            {
                $.plot($(selector), data,
                {
                    series: 
                    {
                        pie: {
                            show: true,
                            radius: 1,
                            label: {
                                show: true,
                                radius: 1,
                                formatter: function(label, series) {
                                    return '<div style="font-size:10pt;text-align:center;padding:2px;color:white;">'.concat(label).concat('<br/>').concat(series.data[0][1]).concat('</div>');
                                },
                                background: { opacity: 0.8 }
                            }
                        }
                    },
                    legend: {
                        show: false
                    },
                    grid: {
                        hoverable: true,
                    },
                    tooltip: true,
                    tooltipOpts: {
                        cssClass: "flotTip",
                        content: function(label, x, y){
                            return y.toString().concat(" ").concat(label);
                        },
                        shifts: {
                            x: 20,
                            y: 0
                        },
                        defaultTheme: true
                    }
                });
            });
        }
    }
});

Richard MacCutchan

Код, скорее всего, нуждается в корректировке с учетом различных размеров экрана. Вернитесь к человеку, который написал этот код для помощи.

0 Ответов