如何为多个数据的ng重复准备开发极端图表

Question

ng repeat多个数据未绑定到dx chart

在$scope.TestDataset中保存多个数据集， 但饼图不自动添加

我想要多个饼图用于多个数据源

HTML

   <div class="row">
            <div class="demo-container" ng-repeat="testP in TestDataset[0]">
                <div id="pie" dx-pie-chart="testP"></div>
            </div>
        </div>

JS

var dataSource = [
       [ {
        country: "Russia",
        area: 50,
        other: 20
    }, {
        country: "Canada",
        area: 50,
        other: 26
    }],
      [{
          country: "India",
          area: 50,
          other: 20
      }, {
          country: "China",
          area: 50,
          other: 26
      }]

    ];
    var ttCol = [{ Val1: "country", Val2: "area" }, { Val1: "country", Val2: "other" }]

    $scope.TestDataset1 = [];
    for (i = 0; i < dataSource.length; i++) {

            $scope.chartOptionsTest = [{
                size: {
                    width: 500
                },
                palette: "bright",
                dataSource: dataSource[i],
                series: [
                    {
                        argumentField: ttCol[i].Val1,
                        valueField: ttCol[i].Val2,
                        label: {
                            visible: true,
                            connector: {
                                visible: true,
                                width: 1
                            }
                        }
                    }
                ],
                title: "Area of Countries",
                "export": {
                    enabled: true
                },
                onPointClick: function (e) {
                    var point = e.target;

                    toggleVisibility(point);
                },
                onLegendClick: function (e) {
                    var arg = e.target;

                    toggleVisibility(this.getAllSeries()[0].getPointsByArg(arg)[0]);
                }
            }];
            $scope.TestDataset1.push($scope.chartOptionsTest)
        }
    $scope.TestDataset = $scope.TestDataset1;

 //$scope.TestDataset = $scope.TestDataset1[0];
//if i bind data like this one pie chart is loading 

Answer 1

$scope.chartOptionsTest是代码中的数组。它应该是一个对象。删除方括号。

$scope.chartOptionsTest = {
    size: {
        width: 500
    },
    palette: "bright",
    dataSource: dataSource[i],
    series: [
        {
            argumentField: ttCol[i].Val1,
            valueField: ttCol[i].Val2,
            label: {
                visible: true,
                connector: {
                    visible: true,
                    width: 1
                }
            }
        }
    ],
    title: "Area of Countries",
    "export": {
        enabled: true
    }
};

然后，您的标记将是：

<div class="demo-container" ng-repeat="testP in TestDataset">
    <div id="pie" dx-pie-chart="testP"></div>
</div>

请参阅CodePen sample。