Javascript AngularJS选项卡集中的Chart.js不呈现

我正在使用基于Chart.js的AngularJS模块来显示图形。它就像一个符咒，但当我在AngularJS选项卡集中显示一个图表时，如果它不是第一个选项卡，则图形不会呈现

  <tabset>
    <tab heading="Tab 1">
        <!-- OK -->
        <canvas class="chart chart-pie" data="[140, 160]" labels="['d1', 'd2']" legend="true"></canvas>
    </tab>
    <tab heading="Tab 2">
        <!-- Does not render -->
       <canvas class="chart chart-pie" data="[140, 160]" labels="['d1', 'd2']" legend="true"></canvas>
    </tab>
  </tabset>

这是最新的。有人能解决这个问题吗

---

正如@Martin指出的，这是Chart.js在隐藏的DOM元素中初始化时不显示图表的问题（即使在显示隐藏的元素后，其高度和宽度仍保持在0px）

跟踪此问题

如果您被标签等组件阻止，我会与您分享我的自制解决方案。我已经创建了一个指令，在其中编译canvas元素。为了能够在需要时刷新元素（例如当选项卡打开时），我观察一个属性，我将在控制器中的选项卡更改时手动更改该属性

这是我的指示：

app.directive('graphCanvasRefresh', ['$compile', function($compile) {
function link(scope, elem, attrs) {

    function refreshDOM() {
        var markup = '<canvas class="chart chart-pie" id="graph" data="entityGraph.data" labels="entityGraph.labels" legend="true" colours="graphColours" ></canvas>';
        var el = angular.element(markup);
        compiled = $compile(el);
        elem.html('');
        elem.append(el);
        compiled(scope);
    };

    // Refresh the DOM when the attribute value is changed
    scope.$watch(attrs.graphCanvasRefresh, function(value) {
        refreshDOM();
    });

    // Clean the DOM on destroy
    scope.$on('$destroy', function() {
        elem.html('');
    });
};

return  {
    link: link
};
}]);

app.directive（'graphCanvasRefresh'，['$compile'，函数（$compile）{
功能链接（范围、要素、属性）{
函数refreshDOM（）{
var标记=“”；
var el=角度元素（标记）；
compiled=$compile（el）；
elem.html（“”）；
附加元素（el）；
编制（范围）；
};
//更改属性值时刷新DOM
范围.$watch（attrs.graphCanvasRefresh，函数（值）{
刷新（）；
});
//在销毁时清除DOM
作用域.$on（“$destroy”，函数（）{
elem.html（“”）；
});
};
返回{
链接：链接
};
}]);

---

肮脏的地狱，但这是一个工作的解决方案，您可以使用等待图表.js更新。希望它能帮助别人。

在@bviale答案中添加了一些功能

app.directive('graphCanvasRefresh', function ($compile, $timeout) {
    return {
        scope:{
            labels: "=",
            data: "=",
            type: "=",
            refresh: "="
        },
        link: function (scope, elem, attrs) {

            function refreshDOM() {
                var markup = '<canvas class="chart chart-' + scope.type + '" id="' + scope.type + scope.$id + '" chart-labels="' + scope.labels + '" ' +
                                                'chart-legend="false"  chart-data="' + scope.data +'" ></canvas>';
                var newEl = $compile(markup)(scope.$parent.$new());
                elem.html(newEl);
                scope.refresh = false;
            };

            // Refresh the DOM when the attribute value is changed
            scope.$watch('refresh', function (value) {
                $timeout(
                refreshDOM(), 100);
            });

            // Clean the DOM on destroy
            scope.$on('$destroy', function () {
                elem.html('');
            });
        }
    };

});

app.directive（'graphCanvasRefresh'，函数（$compile，$timeout）{
返回{
范围：{
标签：“=”，
数据：“=”，
类型：“=”，
刷新：“=”
},
链接：功能（范围、要素、属性）{
函数refreshDOM（）{
var标记=“”；
var newEl=$compile（markup）（scope.$parent.$new（））；
html（newEl）；
scope.refresh=false；
};
//更改属性值时刷新DOM
范围：$watch（'refresh'，函数（值）{
$timeout(
refreshDOM（），100）；
});
//在销毁时清除DOM
作用域：$on（“$destroy”，函数（）{
elem.html（“”）；
});
}
};
});

创建图表时，Chart.js在最初隐藏div时不显示有问题