Html 如何为多个数据准备ng repeat上的dev extreme图表

在

ng重复中

多个数据未绑定到

dx图表

我正在

$scope.TestDataset

中保存多个数据集， 但饼图不会自动添加

我想为多个数据源创建多个饼图

HTML

JS

var数据源=[
[ {
国家：“俄罗斯”，
面积：50，
其他：20
}, {
国家：“加拿大”，
面积：50，
其他：26
}],
[{
国家：“印度”，
面积：50，
其他：20
}, {
国家：“中国”，
面积：50，
其他：26
}]
];
var ttCol=[{Val1:“国家”，Val2:“地区”}，{Val1:“国家”，Val2:“其他”}]
$scope.TestDataset1=[]；
对于（i=0；i

$scope.ChartOptions测试是代码中的一个数组。它应该是一个对象。拆下方括号

$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>



看

$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>