Question

找到了几篇接近解决此问题的帖子。我正在将图表加载到窗口小部件中，而不是填充它，而是将其居中并扩展到窗口小部件的上方，例如仅显示饼图的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.

Answer 1

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

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

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

在gridster小部件中根据高图的负载调整大小

1 个答案: