Question

在我的应用程序中，我有两个标签，让我们简单地称它们为A和B.

图表在选项卡A中。这是简单的代码：

<canvas width="100%" height="30%" style="width: 100%; height: 20%;" id="line_general" 
class="chart chart-line" chart-data="myData" 
 chart-legend="true" chart-colours="colours"
chart-labels="myLabels" chart-series="mySeries"/>

每次按下按钮时都会填充图表，此按钮也位于选项卡A中：

$scope.buttonPressed = function(){
    $http.get('remoteURL').success(function(response, status, headers, config){
        myLabels = response.labels;
        myData = respose.data;
        ...
}

问题出现在用户最初填充图表后切换到选项卡B时，当此选项卡处于活动状态时，他们会调整浏览器窗口的大小。此操作会触发图形上尝试更新的事件，但由于引导UI的选项卡机制而隐藏，因此更新不起作用并导致异常。

所以我的想法是听取标签更改事件，我可以通过向标签添加一个选择事件来实现：

<div ng-controller="MainCtrl" class="wrapper">
    <tabset>
        <tab ng-repeat="tab in tabs" heading="{{tab.title}}" active="tab.active" disable="tab.disabled" select="tabChanged(tab)">
            <div ng-include="tab.content"></div>
        </tab>
    </tabset>
</div>

并且，在处理程序内部：

$scope.tabChanged = function(tab){
    if(tab.title != "A"){
        //disable refresh
    }else{
    //  re-enable refresh

    }
};

那么，有没有办法实现这个目标？

Answer 1

通过解决方法解决：每次用户切换到包含图表的选项卡时，我都会手动触发“调整大小”窗口事件。图形库会监听此事件，自动调整图形大小。

$scope.tabChanged = function(tab){
if(tab.title == "A"){
    $timeout(function() {
            var evt = $window.document.createEvent('UIEvents'); 
            evt.initUIEvent('resize', true, false, $window, 0); 
            $window.dispatchEvent(evt);
        });
}
};

不是很优雅，但它会做，等待库更新。

bootstrap ui + angular chart：是否可以禁用图表的自动刷新功能？

1 个答案: