问题描述
我正在使用基于 Chart.js 的 AngularJS 模块来显示图形.它的作用就像一个魅力，但是当我在 AngularJS 标签集中显示图表时，如果它不是第一个标签，则图表不会呈现.
I am using a AngularJS module based on Chart.js to display graph. It works like a charm, but when I display a chart in a AngularJS tabset, the graph does not render if it is not the first tab.
<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.有没有人设法解决这个问题?
This is the JSFiddle. Does anyone manage to fix this ?
谢谢
推荐答案
正如@Martin 所指出的，这是 Chart.js 在隐藏的 DOM 元素中初始化时不显示图表的问题(其高度和宽度保持在即使在显示隐藏元素后也是 0px).
As @Martin pointed it out, it is an issue of Chart.js not showing the chart when initiliazed in a hidden DOM element (its height and width remain at 0px even after showing the hidden element).
在此处跟踪此问题.
如果您被初始化为隐藏的选项卡等组件阻止，我会与您分享我的自制解决方案.我创建了一个指令，在其中编译画布元素.为了能够在需要时(例如，打开选项卡时)刷新元素，我观察了一个属性，我将在控制器中的选项卡更改时手动更改.
I share you my home made solution if you are blocked by components like tabs initialized hidden. I have created a directive in which I compile the canvas element. In order to be able to refresh the element when needed (eg when the tab is opened), I watch an attribute I will manually change on tab change in my 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 更新时使用.希望它可以帮助某人.
Dirty as hell, but this is a working solution you can use waiting for Chart.js update. Hope it can help someone.
这篇关于AngularJS 标签集中的 Chart.js 不呈现的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！