javascript - 使用 ng-repeat 重复 Google Chart 图表

Question

我还在学习 AngularJS，所以如果我说了任何愚蠢的话，请原谅我。我正在使用 Google Chart 创建图表。

每次用户点击一个按钮，我的网页就会多显示一个图表。所以我想到了使用 ng-repeat 来显示它们。此外，每个图表都可以使用按钮(以下代码中的 img)关闭(不再显示):

<div class="chartContainer" ng-repeat="x in arrayDiv">
    <img src="close.png"/>
</div>

要创建图表，我是这样进行的:

var chart = new google.visualization.ChartWrapper({
    'chartType': chartType, 
    'containerId': //???
});

所以我的问题是:每次创建图表时如何扩展 $scope.arrayDiv？我如何获取以这种方式创建的 div 的 ID 以影响图表？

Answer 1

尝试使用 angular-google-chart，

引用:https://angular-google-chart.github.io/angular-google-chart/docs/latest/examples/bar/

<div class="chartContainer" ng-repeat="data in arrayDiv">
    <div layout-padding layout-margin  google-chart chart="drawChart(x)">        
    </div> 
</div>

$scope.drawChart = function (value) {

    $scope.chartData = [];
    var chartValue = {
        c: [{
           v: 'subject
        }, {
            v: 5,
            f: " questions"
        }, {
            v: 6,
            f:  " questions"
        }]

    };
    $scope.chartData.push(chartValue);
    $scope.qaChart = {};
    $scope.qaChart.type = "BarChart";
    $scope.qaChart.data = {
        "cols": [{
            id: "Sections",
            label: "Subject",
            type: "string"
        }, {
            id: "Correct",
            label: "Correct",
            type: "number"
        }, {
            id: "Wrong",
            label: "Wrong",
            type: "number"
        }],
        "rows": $scope.chartData
    };
    $scope.qaChart.options = {

        "isStacked": "true",
        "fill": 20,
        "displayExactValues": true,
        "colors": ['#4CAF50', '#EF5350', '#00adee'],
        "vAxis": {
            "title": " Questions",                
        },
        "hAxis": {
            "title": "Details",
        }
    };
    return $scope.qaChart;
};