Question

我使用的图表在画布上效果很好： -

<canvas id="canvas_HorizontalBar3" height="170" width="600"></canvas>
<canvas id="canvas_HorizontalBar1" height="170" width="600"></canvas>

但是当我开始在我的应用程序中使用角度＆amp;想要动态生成canvas。仅显示第一个图表，第二个图表显示空白。

<div gridster>
                    <ul>
                        <li gridster-item="widget" ng-repeat="widget in dashboard.widgets">
                            <div class="box" ng-controller="CustomWidgetCtrl">
                                <div ng-if="widget.canvas === 'canvas_HorizontalBar3'">
                                    <canvas id="canvas_HorizontalBar3" height="170" width="600"></canvas>
                                </div>
                                <div ng-if="widget.canvas === 'canvas_HorizontalBar1'">
                                    <canvas id="canvas_HorizontalBar1" height="170" width="600"></canvas>
                                </div>
                            </div>
                        </li>
                    </ul>
                </div>

$scope.dashboards = {
            '1': {
                id: '1',
                name: 'Home',
                widgets: [{
                    col: 0,
                    row: 1,
                    sizeY: 1,
                    sizeX: 3,
                    name: "Employee Count By Category",
                    canvas: "canvas_HorizontalBar3"
                }, {
                    col: 3,
                    row: 1,
                    sizeY: 1,
                    sizeX: 3,
                    name: "Employee Count By Department",
                    canvas: "canvas_HorizontalBar1"
                }]
            }
        };

知道如何解决这个问题吗？

我使用AJAX调用填充图表： -

jq.ajax({
            type: 'GET',
            url: '/Dashboard/getDepartmentChart',
            async: true,
            success: function (data) {
....
}

Answer 1

您的示例代码可能只是为了说明而简化，但在这种情况下，您可以使用变量

分配ID

<canvas ng-attr-id="{{widget.canvas}}" height="170" width="600"></canvas>

顺便说一下，您可以使用$http()（推荐）代替$.ajax，或者在获得数据后必须手动调用$scope.$apply()。

AngularJs - 画布上的图表不能在ng-repeat中呈现

1 个答案: