我有角這樣的代碼 -JSON數據
$scope.data =[];
$http({
method: "GET",
url: "http://127.0.0.1:8000/api/",
}).then(function success(response){
var total = response.data.length;
for(var i=0; i<response.data.length; i++){
$scope.companies.push(response.data[i].companies);
$scope.wtdcagr.push(response.data[i].wtdcagr);
}
for(var i=0; i<$scope.wtdcagr.length; i++){
$scope.final_wtdcagr.push($scope.wtdcagr[i]+10);
$scope.sum += $scope.final_wtdcagr[i];
}
$scope.max_val=$scope.sum/total;
for(var i=0; i<$scope.final_wtdcagr.length; i++){
$scope.data.push({"name":$scope.companies[i], "children":[{"name":$scope.companies[i], "size":$scope.final_wtdcagr[i]}]});
}
$scope.load=1;
},function error(response){
});
$scope.componentsData ={"name":"root","children":[{"name":"Koutons Retail India","children":[{"name":"Koutons Retail India","size":10}]},{"name":"Liberty Shoes","children":[{"name":"Liberty Shoes","size":7.975043433750518}]},{"name":"Bharat Petroleum Corporation","children":[{"name":"Bharat Petroleum Corporation","size":22.985710309643373}]},{"name":"Chennai Petroleum Corporation","children":[{"name":"Chennai Petroleum Corporation","size":13.214542375972897}]},{"name":"Gujarat State Fertilizers & Chemicals","children":[{"name":"Gujarat State Fertilizers & Chemicals","size":9.054818244756332}]},{"name":"Hindustan Organic Chemicals","children":[{"name":"Hindustan Organic Chemicals","size":10.54768008048322}]},{"name":"Tata Coffee","children":[{"name":"Tata Coffee","size":9.905904053799995}]},{"name":"Coffee Day Enterprises","children":[{"name":"Coffee Day Enterprises","size":9.132573506417222}]},{"name":"Corporation Bank","children":[{"name":"Corporation Bank","size":9.413101403401246}]},{"name":"Dena Bank","children":[{"name":"Dena Bank","size":2.9519383428833708}]}]} ;
// $scope.componentsData = {
// "name": "root",
// "children": $scope.data
// };
,並在我的HTML的
<div id="treeParentDiv" style="width:1200px;height:600px;margin:auto" >
<treemap
data="componentsData"
parentElementId="treeParentDiv"
color-label="size"
size-label="size"
max-val="10"
search="{{searchbox}}"
id="IDTreeMap">
</treemap>
它的工作原理,當$scope.componentsData
是靜態的是,但是當我嘗試從json加載它並將其傳遞到$scope.componentsData
,如
$scope.componentsData = {
"name": "root",
"children": $scope.data
};
它無法工作。 我正在使用的樹形圖是https://github.com/poshak/treemap
我懷疑在通過$scope.data
收到數據之前,樹圖呈現。謝謝
在您的代碼$ scope.componentsData如果實現是獲得$ HTTP承諾之前設置。您需要將$ scope.componentsData的設置移動到承諾的成功回調中 – jbrown