在 gridster 小部件中调整 highcharts 的负载大小答案

【问题标题】：resize on load of highcharts in gridster widget在 gridster 小部件中调整 highcharts 的负载大小
【发布时间】：2019-09-04 01:26:36
【问题描述】：

找到了几篇接近解决此问题的帖子。我正在将图表加载到小部件中，但它没有填充它，而是居中并延伸到小部件之外 - 例如，大约只有 1/3 的饼图显示。

我找到了 gridster 的调整大小选项，它让我几乎到了那里......当我加载页面时存在同样的问题，但是当我调整小部件的大小时，图表会完美地填充它。

我尝试过对齐图表，删除宽度和高度设置，向网格添加调整大小和停止元素..

   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.

【问题讨论】：

您能在 jsfiddle 或 codesandbox 等在线代码编辑器中以某种方式重现它吗？

标签： highcharts gridster

【解决方案1】：

在小部件周围添加一个 div 包装器并添加具有该小部件的高度和宽度的类。它只会在该包装器中呈现您的高图。

<div class="size-1x1"> 
  Render your graph code here
</div>

CSS:
.size-1x1 {
  height:100px;
  width: 120px;
}

【讨论】：