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

Posted 2023-05-07

【中文标题】在 gridster 小部件中调整 highcharts 的负载大小

【英文标题】：resize on load of highcharts in gridster widget

【发布时间】：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 等在线代码编辑器中以某种方式重现它吗？

【参考方案1】：

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

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

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