DIV时隐时现ChartJS未呈现 [英] ChartJS not rendering when div hidden
问题描述
我有标签的角度应用。这些标签显示和隐藏使用NG-秀指令股利内容。每个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.
当我从标签到另一个刷卡，我发现我的图表是不会呈现直到Ÿrelaod的页面，或进行另一个请求我的功能，以重新加载图表查询我的服务器，eventhough所有的数据都已经被加载$承诺。
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>
和本我的角度控制器
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
A similar issue had been reported here : https://github.com/jtblin/angular-chart.js/issues/29
如果图表被包含在一个div是隐藏的，然后出现在屏幕上
它不会正确渲染（右现在遇到了同样的问题！）。这对于隐藏着的 NG-节目指令标签标签您的图表的情况。一种解决方法是重新绘制于改变标签图表。
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屋！
