我正在使用基于 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>
这是 JSFiddle .有人设法解决这个问题吗?
谢谢
最佳答案
正如@Martin 所指出的,这是 Chart.js 在隐藏的 DOM 元素中初始化时不显示图表的问题(即使在显示隐藏元素后,其高度和宽度仍保持为 0px)。
已跟踪此问题 here .
如果您被初始化为隐藏的选项卡等组件阻止,我会与您分享我自制的解决方案。我创建了一个编译 Canvas 元素的指令。为了能够在需要时刷新元素(例如,当打开选项卡时),我观察了一个属性,我将在 Controller 中的选项卡更改时手动更改。
这是我的指令:
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 更新。希望它可以帮助某人。
关于javascript - AngularJS 选项卡集中的 Chart.js 不呈现,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/29395853/