如何在 angularjs 中一起使用 angular-gridster 和 highcharts-ng 指令

Question

我正在使用 angularjs-gridster (https://github.com/ManifestWebDesign/angular-gridster) with higharts-ng directive (https://github.com/pablojim/highcharts-ng/blob/master/README.md)

我正在尝试在网格单元格内生成这些图表。我的问题是 highcharts 占用了它们的默认宽度和高度（600px * 400px），即使我将我的图形抽屉功能放在 $timeout 服务中也是如此。这是代码：

HTML:

<div class="graph-list" gridster="gridsterOpts">
  <ul>
    <li gridster-item="graph.grid" class="graph-set" ng-repeat="graph in graphs | orderBy: 'number'">
      <highchart id="{{'graph' + graph.number}}" class="graph" config="graph.config"></highchart>
    </li>
  </ul>
</div>

JS:

// inside the graph-list div controller 
$scope.gridsterOpts = {
    colums: 4,
    rowHeight: 240,
    margins: [10,10],
    outerMargin: false,
    draggable: {
      enabled: false // whether dragging items is supported
    }
};
$scope.graphs = {}; //
$scope.somefunction(){ /* this function populates the graphs object */ }; 
function drawGraphs(){ /* this function populates the graph.config object by looping through all the graph objects */ }
$timeout(function(){
    drawGraphs(); 
});

我已经尝试在网格单元宽度和高度上创建监视，但它没有显示任何变化。我没有在 graph.config 选项中明确给出 highchart 的宽度和高度，因为我在 highcharts-ng 文档中读到它默认采用父宽度和高度，但它没有发生。谁能指导我可能是什么问题。

在我看来，angularjs-gridster 插件无法在 highcharts 指令能够呈现自身之前设置网格宽度和高度。请帮忙。

Answer 1

我最终做到了。我需要在 highcharts-ng documentation.[= 中提供的 func() 选项中添加 chart.reflow() 方法（我想这只是调整图表的大小而不是重新绘制图表，以便提高性能） 12=]

graph.config = {
  options: { },
  series: [],
  func: function (chart) {
    $timeout(function(){
      chart.reflow();
    })
  } 
}

希望对其他人有所帮助。

如何在 angularjs 中一起使用 angular-gridster 和 highcharts-ng 指令

how to use angular-gridster and highcharts-ng directives together in angularjs

javascript

angularjs

gridster

highcharts-ng