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;
};

使用ng-repeat重复Google Chart图表

1 个答案: