Question

我是AngularJs和Google图表的新手。我的要求是为每个li动态显示ng-repeat中的Google图表。

<li ng-repeat="ques in surveyquestions">
    <label for="{{ques['questions']}}">
        {{ques['id']}} {{ques['questions']}}
    </label>
    <div ng-init="calltry(ques['option_array'],ques['id'])"></div>
    <div id="chartdiv{{ques['id']}}"></div>
</li>

在上面的代码中通过ng-init我传递数据来渲染Google图表。在JavaScript中，我使用如下，但它不起作用。

var chart = new google.visualization.ColumnChart(document.getElementById('chartdiv'+id));

当id是静态的时，它正常工作。

<div id="chartdiv"></div>

var chart = new google.visualization.ColumnChart(document.getElementById('chartdiv'));

请帮助解决问题所在。

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(data)">        
    </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;
};

谷歌图表在angularjs ng-repeat中

1 个答案: