Question

我有以下AngularJS应用程序：

angular.module("app-machines", ['ngFlatDatepicker'])
    .factory('MachinesService', ['$http', MachinesService])
    .controller('mainController', ['$scope', 'MachinesService', '$timeout', mainController])
    .directive('onFinishRender', function ($timeout) 
    {
        return {
            restrict: 'A',
            link: function (scope, element, attr) {
                if (scope.$last === true) {
                    $timeout(function () {
                        scope.$emit('ngRepeatFinished');
                    });
                }
            }
        }
    });

这里发生了什么（粘贴代码太长）。

用户在页面上有两个控件（日期和日期），在更改火灾时会从网站（json）下载数据。
之后我只是将返回的json存储到对象$scope.machines。

然后我在我的网页上等待ng-repeat完成渲染组件（在我的情况下，ng-repeat下的每个项目我都在创建一个画布，其中的图表将存储如下）

    <div class="col-md-12" ng-repeat="machine in machines" on-finish-render="ngRepeatFinished">
        <h1> {{ machine.name }}</h1>
        <canvas id="{{'myChart_' + $index}}" width="400" height="400"></canvas>
    </div>

完成渲染后，我调用以下函数

    $scope.$on('ngRepeatFinished', function (ngRepeatFinishedEvent) {
        //you also get the actual event object
        //do stuff, execute functions -- whatever...

        var data = {
            labels: ["January", "February", "March", "April", "May", "June", "July"],
            datasets: [
                {
                    label: "My First dataset",

                    // The properties below allow an array to be specified to change the value of the item at the given index
                    // String  or array - the bar color
                    backgroundColor: "rgba(100,220,220,0.2)",

                    // String or array - bar stroke color
                    borderColor: "rgba(220,220,220,1)",

                    // Number or array - bar border width
                    borderWidth: 1,

                    // String or array - fill color when hovered
                    hoverBackgroundColor: "rgba(220,220,220,0.2)",

                    // String or array - border color when hovered
                    hoverBorderColor: "rgba(220,220,220,1)",

                    // The actual data
                    data: [65, 59, 80, 81, 56, 55, 40],

                    // String - If specified, binds the dataset to a certain y-axis. If not specified, the first y-axis is used.
                    yAxisID: "y-axis-0",
                },
                {
                    label: "My Second dataset",
                    backgroundColor: "rgba(220,220,220,0.2)",
                    borderColor: "rgba(220,220,220,1)",
                    borderWidth: 1,
                    hoverBackgroundColor: "rgba(220,220,220,0.2)",
                    hoverBorderColor: "rgba(220,220,220,1)",
                    data: [28, 48, 40, 19, 86, 27, 90]
                }
            ]
        };
        var options = {
            scales: {
                xAxes: [{
                    stacked: true
                }],
                yAxes: [{
                    stacked: true
                }]
            }
        };

        for (var i = $scope.machines.length - 1; i >=0; i--) {
            var ctx = $("#myChart_" + i);

            var myBarChart = new Chart(ctx, {
                type: 'bar',
                data: data,
                options: options
            });

            myBarChart.update();

            console.log("processed " + i);
        }
    });

以下是发生的问题。生成页面，我可以使用图表查看我的所有画布，但条形图仅显示一个图表。其余图表上的条形图有不明原因隐藏条形图。但是我仍然可以像这样悬停在他们身上：

FINAL

所以最后问题是由于我的所有图表都绑定到同一个数据源（我现在有一个静态数据源）。一旦我将其更改为动态数据源（所有图表都有自己的数据集），它突然就像一个魅力。

我在这里做错了什么？

ChartJS不渲染图表

0 个答案: