当div隐藏时ChartJS不呈现 [英] ChartJS not rendering when div hidden
问题描述
我有一个带有标签的角度应用程序。这些标签使用ng-show指令显示和隐藏div内容。每个div包含一些显示ChartJS图表的画布。
I have an angular application with tabs. Those tabs show and hide the div content using the ng-show directive. Each div contains inside some canvas showing ChartJS charts.
当我从选项卡滑动到另一个时，我发现我的图表不会渲染，直到您重新显示页面或提出其他请求我的函数为了重新加载图表查询我的服务器，eventhough所有的数据已经加载的$ promise。
When i swipe from tab to another, i find that my charts are not rendered until y relaod the page or make another request to my function in order to reload the charts querying my server, eventhough all the data is already loaded by a $promise.
这里，我的图表正确呈现...
Here, my charts are correctly rendered...
>
但是当我改变我的选项卡而不强制重新加载（数据已经加载），这是发生了什么...
But when i change my tab without forcing a reload (the data is already loaded), this is what happens...
这是我的HTML
<section style="overflow-y:hidden" class="bg-white scroller-v" ng-init="AskForToggle()">
<div class="tab-nav clearfix">
<ul class="side-padding-3x">
<li data-ng-class="activeSubMenu('Actividades')">
<a class="size-12x" data-ng-click="Show('Actividades')">Actividades</a>
</li>
<li data-ng-class="activeSubMenu('Paginas')">
<a class="size-12x" data-ng-click="Show('Paginas')">Compromiso</a>
</li>
<li data-ng-class="activeSubMenu('Videos')">
<a class="size-12x" data-ng-click="Show('Videos')">Videos</a>
</li>
</ul>
</div>
<div class="col col-unpadded col-lg-2 col-md-3 col-sm-12 col-xs-12 side-menu">
<header>Fechas</header>
<ul class="list">
<li><input type="date" ng-model="analyticsDateDesde" ng-change="ValidateDateDesde(analyticsDateDesde)" /></li>
<li><input type="date" ng-model="analyticsDateHasta" ng-change="ValidateDateHasta(analyticsDateHasta)" /></li>
<li><input type="button" ng-click="UpdateAnalytics()" value="Actualizar Fechas" style="color:white; background-color:#3c8dbc;border:#3c8dbc" /></li>
</ul>
<header>Alumnos</header>
<ul class="list">
<li data-ng-repeat="user in users">
<a data-ng-class="activeNav(user)" data-ng-click="$parent.selectedUser = user">{{user.name}} {{user.lastName}}</a>
</li>
</ul>
</div>
<div id="divActividades" class="col col-unpadded col-lg-10 col-md-9 col-sm-12 col-xs-12" style="overflow-y: scroll; overflow-x:hidden;height: 100%;">
Some charts
</div>
<div id="divPaginas" class="col col-unpadded col-lg-10 col-md-9 col-sm-12 col-xs-12" style="overflow-y: scroll; overflow-x:hidden;height: 100%;">
Some charts
</div>
<div id="divVideos" class="col col-unpadded col-lg-10 col-md-9 col-sm-12 col-xs-12" style="overflow-y: scroll; overflow-x:hidden;height: 100%;">
Some charts
</div>
/ p>
And this my angular controller
appFlipped.controller("ClassTraceability", ["$rootScope", "$scope", "Courseware", "$timeout", "$window", function (n, t, i, to, window) {
t.GetTypeClass = function (traza) {
if (traza.tipoAccion == 'Video')
return 'cd-timeline-img cd-movie';
else if (traza.tipoAccion == 'Problem')
return 'cd-timeline-img cd-picture';
else
return 'cd-timeline-img cd-location';
}
n.menuData = utils.courseMenu();
t.activeNav = function (n) {
return {
active: t.selectedUser && t.selectedUser.id == n.id
}
}
t.users = [];
t.selectedUser = null;
t.timeOnPlatform = null;
t.timeOnPlatformPerDayComparison = null;
t.timeOnPlatformPerDay = null;
i.init(n.routeData.classId).then(function () {
i.users.queryClass().$promise.then(function (n) {
t.users = n;
n.length && (t.selectedUser = n[0]);
})
});
t.$watch("selectedUser", function (n) {
n != null && t.loadTraceability();
});
t.UpdateAnalytics = function () {
t.loadTraceability();
}
t.loadTraceability = function () {
if (t.selectedUser != null) {
var p = {
userId: t.selectedUser.id,
courseURL: n.rutaParaAnalytics,
fechaDesde: t.analyticsDateDesde,
fechaHasta: t.analyticsDateHasta
};
i.traceability.get(p).$promise.then(function (n) {
t.Traceability = n.traceability;
t.showTimeline = t.Traceability.length > 0 ? true : false;
t.labelsTimeOnPlatform = n.timeOnPlatform[0];
t.dataTimeOnPlatform = n.timeOnPlatform[1];
t.loadPageActivity();
t.labelsTimeOnPlatformPerDay = n.timeOnPlatformPerDay[0];
t.dataTimeOnPlatformPerDay = n.timeOnPlatformPerDay[1];
t.loadPageActivityPerDay();
t.labelsTimeOnPlatformPerDayComparison = (n.timeOnPlatformPerDayComparison[0])[0];
t.dataTimeOnPlatformPerDayComparisonClass = (n.timeOnPlatformPerDayComparison[0])[1];
t.dataTimeOnPlatformPerDayComparisonStudent = (n.timeOnPlatformPerDayComparison[1])[1];
t.loadPageActivityComparison();
t.totalVideoCount = n.genericVideoAnalytics[0];
t.userTotalVideoCount = n.genericVideoAnalytics[1];
t.totalMinutesVideosCount = n.genericVideoAnalytics[2];
t.usertotalMinutesVideosCount = n.genericVideoAnalytics[3];
t.loadGenericVideoAnalytics();
t.videoTimeLabels = n.videoTime[0];
t.videoTimeData = n.videoTime[1];
t.loadVideoTime();
t.videoTimePerDayLabels = n.videoTimePerDay[0];
t.videoTimePerDayData = n.videoTimePerDay[1];
t.loadVideoTimePerDay();
t.videoTimePerDayComparisonLabels = (n.videoTimePerDayComparison[0])[0];
t.videoTimePerDayComparisonClass = (n.videoTimePerDayComparison[0])[1];
t.videoTimePerDayComparisonUser = (n.videoTimePerDayComparison[1])[1];
t.loadVideoTimePerDayComparison();
});
}
};
t.PaginaVisible = 'Actividades';
t.activeSubMenu = function (pagina) {
if (t.PaginaVisible == pagina)
return 'active';
else
return '';
}
t.Show = function (pagina) {
if (pagina == 'Actividades') {
angular.element("#divActividades")[0].style.display = 'block';
angular.element("#divPaginas")[0].style.display = 'none';
angular.element("#divVideos")[0].style.display = 'none';
t.PaginaVisible = 'Actividades';
}
if (pagina == 'Paginas') {
angular.element("#divActividades")[0].style.display = 'none';
angular.element("#divPaginas")[0].style.display = 'block';
angular.element("#divVideos")[0].style.display = 'none';
t.PaginaVisible = 'Paginas';
}
if (pagina == 'Videos') {
angular.element("#divActividades")[0].style.display = 'none';
angular.element("#divPaginas")[0].style.display = 'none';
angular.element("#divVideos")[0].style.display = 'block';
t.PaginaVisible = 'Videos';
}
}
}]);
最有线的事情是所有图表中的一个被渲染！有任何人遇到同样的问题吗？
The most wired thing is that one of all the charts is rendered!! Have anyone face the same problem?
回答
推荐答案
问题已在此处报告：
https://github.com/jtblin /angular-chart.js/issues/29
如果图表包含在隐藏的div中，然后出现在屏幕
上将无法正确呈现（遇到同一问题现在！）。对于使用 ng-show 指令的标签页隐藏标签中的图表，情况就是如此。解决方法是在更改标签页时重绘图表。
If the chart is contained in a div that is hidden and then appear on screen it won't render correctly (encountering the same issue right now!). Which is the case for your charts in the tabs hidden tabs with ng-show directives. A workaround would be to redraw the chart on changing tab.
这应该可以通过 myChart.update（）方法实现。
例如，您可以在显示方法中触发。
This should be achievable via the myChart.update() method. And it could be triggered in your Show method for instance.
我会为我的部分尝试不同的解决方案，回答相应。希望它可以帮助一点！
I will try different solutions for my part and will update this answer accordingly. Hope it could help a little!
这篇关于当div隐藏时ChartJS不呈现的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
