在 angular bootstrap 选项卡中绘制图表

Question

我得到了一个在选项卡中绘制图表的指令。由于选项卡未正确呈现 plotly 无法正确设置其大小

<tab ng-click="barChartControl.render()" ng-controller="ContactController as conCtrl">
  <tab-heading translate="Header"></tab-heading>
  <div class="col-sm-12">
    <bar-chart mode="'stack'" data="distribution.barValues" labels="distribution.barLabels" theme="'rainbow'" header="'SMS Timeline'" control="barChartControl">
    </bar-chart>
  </div>
</tab>

虽然我已经对它的渲染函数进行了 2 种绑定控制="barChartControl"

这会在我单击选项卡时调用我的渲染函数，但图形未以正确的大小呈现，因为在触发 ng-click 时选项卡未完全加载。如果我在加载选项卡时再次单击该选项卡，图表将完美显示。

在 angular bootstrap

中的 "loaded" 选项卡之后是否有调用函数的方法

Answer 1

我通过将我的渲染函数包装在 $timeout

中来修复它

HTML

<tab ng-click="renderChart()" ng-controller="ContactController as conCtrl">
  <tab-heading translate="Header"></tab-heading>
  <div class="col-sm-12">
    <bar-chart mode="'stack'" data="distribution.barValues" labels="distribution.barLabels" theme="'rainbow'" header="'SMS Timeline'" control="barChartControl">
    </bar-chart>
  </div>
</tab>

控制器

$scope.barChartControl = {};

$scope.renderChart = function () {
  $timeout(function () {
    $scope.barChartControl.render();
  },0);
};

指令

scope: {
  control: '='
},

//Link function
scope.internalControl = scope.control || {};
scope.internalControl.render = render;

function render(){
  //Do stuff
}

在 angular bootstrap 选项卡中绘制图表

Plotly graphs in angular bootstrap tabs

angularjs

plotly

angular-bootstrap