正如@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
};
}]);

脏透了，但这是一个可以解决Chart.js更新的有效解决方案。希望它可以帮助某人。