изменить размер при загрузке старших графиков в виджете гридстера - PullRequest
Новая
       15

изменить размер при загрузке старших графиков в виджете гридстера

0 голосов
/ 13 апреля 2019

Нашел пару постов, которые были близки к решению этой проблемы. Я загружаю диаграмму в виджет, и он не заполняет его, вместо этого он центрируется и расширяется за виджетом - например, примерно 1/3 круговой диаграммы показывает.

Я нашел параметры изменения размера для гридстера, и он почти у меня ... такая же проблема существует, когда я загружаю страницу, но когда я изменяю размер виджета, диаграмма отлично ее заполняет.

Я пытался выровнять диаграмму, убрать настройки ширины и высоты, добавить размеры и остановить элементы к гридстерам. 

   var gridster = null;
        $(document).ready(function () {
            gridster = $(".gridster ul").gridster({
                widget_base_dimensions: ['auto', 140],
                autogenerate_stylesheet: true,
                min_cols: 1,
                max_cols: 6,
                widget_margins: [5, 5],
     resize: {
          enabled: true,
          resize: function (e, ui, $widget) {
              Highcharts.charts[0].reflow(); // reflow the first chart...
          },
          stop: function(e, ui, $widget) {
              Highcharts.charts[0].reflow(); // reflow the first chart...
            }
      }
            }).data('gridster');
            $('.gridster  ul').css({'padding': '0'});
        });

Highcharts.chart('container', {
    chart: {
        type: 'pie'
    },
    title: {
        text: 'User data',
        style: {"fontSize": "15px" , "color":"red"},
    },
    subtitle: {
        text: 'Source: Click the slices to view categories.'
    },
    plotOptions: {
        pie: {
                showInLegend: false,
                dataLabels: {
                    formatter: function(){
                        console.log(this);
                        if (this.percentage > 5)
                            return this.key + ': ' + this.y;
                        else 
                            this.point.visible = false;
                            return '';
                    }
                }
            },
        series: {
            dataLabels: {
                enabled: true,
            }
        }
    },
    tooltip: {
        headerFormat: '<span style="font-size:11px">{series.name}</span><br>',
        pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
    },


when page loads the pie chart is sized to fit into the gridster widget.
...