Question

我有一个带标签的角度应用程序。这些选项卡使用ng-show指令显示和隐藏div内容。每个div都包含一些显示ChartJS图表的画布。

当我从标签滑动到另一个标签时，我发现我的图表不会呈现，直到y重新加载页面或向我的函数发出另一个请求才能重新加载查询我的服务器的图表，尽管所有数据都已加载$承诺。

在这里，我的图表被正确呈现......

enter image description here

但是当我更改我的标签而不强制重新加载（数据已经加载）时，就会发生这种情况......

enter image description here

这是我的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';
        }
    }
}]);

最有线的是所有图表中的一个被渲染!!有没有人面临同样的问题？

此致

Answer 1

此处报告了类似的问题： https://github.com/jtblin/angular-chart.js/issues/29

如果图表包含在隐藏的div中，然后显示在屏幕上它不会正确渲染（现在遇到同样的问题！）。对于带有 ng-show 指令的选项卡隐藏选项卡中的图表，情况就是这种情况。解决方法是在更改选项卡上重绘图表。

这应该可以通过 myChart.update（）方法实现。例如，它可以在显示方法中触发。

我将尝试不同的解决方案，并相应地更新此答案。希望它可以帮助一点！

当div隐藏时，ChartJS不会渲染

1 个答案: