ng-repeat 渲染的 Chart.js 画布不显示图表答案

【问题标题】：Chart.js canvas rendered by ng-repeat does not show chartsng-repeat 渲染的 Chart.js 画布不显示图表
【发布时间】：2020-04-11 17:14:01
【问题描述】：

我正在尝试使用 angularjs 和 chart.js 创建折线图，下面是我的代码：

    <link rel="stylesheet"
      href="http://jtblin.github.io/angular-chart.js/node_modules/bootstrap/dist/css/bootstrap.min.css">
<script
    src="http://jtblin.github.io/angular-chart.js/node_modules/angular/angular.min.js"></script>
<script
    src="http://jtblin.github.io/angular-chart.js/node_modules/chart.js/dist/Chart.min.js"></script>
<script
    src="http://jtblin.github.io/angular-chart.js/dist/angular-chart.js"></script>
<script>
    var app = angular.module('myAPP', ['chart.js'])
    app.controller('ChartController', function ($scope, $http) {
        $scope.counter = [1, 2, 3]
        $scope.labels = []
        $scope.data = []
        $scope.labels[ 1 ] = [1, 2, 3, 4]
        $scope.labels[ 2 ] = [1, 2, 3]
        $scope.labels[ 3 ] = [1, 2, 3, 4, 5]
        $scope.data[ 1 ] = [1, 2, 0, 4]
        $scope.data[ 2 ] = [5, 1, 7]
        $scope.data[ 3 ] = [5, 6, 2, 8, 9]
        $scope.chartOptions = {
            legend: {
                display: true,
            },
            title: {
                display: true,
                text: 'title'
            }
        }
    })
</script>
<body ng-app="myAPP" ng-controller="ChartController">
<div ng-repeat="n in counter">
    <canvas
        class="chart chart-line"
        chart-options="chartOptions"
        chart-data="data['{{n}}']"
        chart-labels="labels['{{n}}']"
    />
</div>
</body>

我在这里使用 ng-repeat 创建画布

<div ng-repeat="n in counter">
        <canvas
            class="chart chart-line"
            chart-options="chartOptions"
            chart-data="data['{{n}}']"
            chart-labels="labels['{{n}}']"
        />
    </div>

但不幸的是没有呈现图表，但是当我像下面这样手动输入数据和标签标签时，会显示图表。

<div ng-repeat="n in counter">
        <canvas
            class="chart chart-line"
            chart-options="chartOptions"
            chart-data="data['1']"
            chart-labels="labels['1']"
        />
</div>

以下是 2 个示例：

working example

not working example

你能帮我找出我在“不工作的例子”中做错了什么吗？

【问题讨论】：

标签： javascript angularjs angularjs-ng-repeat chart.js

【解决方案1】：

你应该去掉引号和大括号，它应该可以工作。

<div ng-repeat="n in counter">
    <canvas
        class="chart chart-line"
        chart-options="chartOptions"
        chart-data="data[n]"
        chart-labels="labels[n]"
    />
</div>

【讨论】：

感谢 uminder 它在 n 只是数字时有效，但是当我使它更复杂时，例如 chart-data="data[n.text+"_"+n.id]" （想象计数器和变量包含数据）它不工作