2016-10-28 5 views
3

ZingCharts 용으로이 데이터 배열을 동적으로 만들려고하는데 문제가 생겼습니다. 나는이 일을 올바른 방법이 무엇인지 모르는동적으로 배열을 만들어 ZingChart 트리 메트를 업데이트하는 방법

var series = [{ 
    text: "Democratic", 
    style: { 
     backgroundColor: "blue" 
    }, 

    children: [{ 
    text: "California", 
    value: 55, 
    style: { 
     backgroundColor: "blue" 
    }, 

    }, { 
    text: "Oregon", 
    value: 7, 
    style: { 
     backgroundColor: "blue" 
    }, 
    }] 
}, 
{ 
    text: "Republican", 
    style: { 
     backgroundColor: "red" 
    }, 
    children: [{ 
    text: "Texas", 
    value: 38, 
    style: { 
     backgroundColor: "red" 
    }, 
    }, { 
    text: "Georgia", 
    value: 16, 
    style: { 
     backgroundColor: "red" 
    }, 
    }] 
}, { 
    text: "TossUp", 
    style: { 
     backgroundColor: "grey" 
    }, 
    children: [{ 
    text: "Arizona", 
    value: 22, 
    style: { 
     backgroundColor: "grey" 
    }, 
    }] 
}, ] 
}] 
}; 

:

는 기본적으로,이 구조를 확인해야합니다. 나는 이런 식으로 뭔가 할 안넘어 :

result.push("text: '" + data[0].party + "'") 

나는 모든 50 개 주와 함께이 작업을 수행 할 필요를, 데이터는이 같은 구조에서 오는 : 내가 무엇을해야에

var data = [{ 
    "color": "blue", 
    "party": "Democratic", 
    "text": "California", 
    "value": 55, 
}, { 
    "color": "blue", 
    "party": "Democratic", 
    "text": "Oregon", 
    "value": 7, 
}, { 
    "color": "red", 
    "party": "Republican", 
    "text": "Texas", 
    "value": 38, 
}, { 
    "color": "red", 
    "party": "Republican", 
    "text": "Georgia", 
    "value": 16, 
}, { 
    "color": "grey", 
    "party": "Democratic", 
    "text": "Arizona", 
    "value": 11, 
}]; 

모든 팁 찾는 것이 크게 감사 할 것입니다. 감사!

답변

3

사용 reduce 기능과 hash table은 당신이 원하는 데이터 구조를 만들려면 다음

var data=[{color:"blue",party:"Democratic",text:"California",value:55},{color:"blue",party:"Democratic",text:"Oregon",value:7},{color:"red",party:"Republican",text:"Texas",value:38},{color:"red",party:"Republican",text:"Georgia",value:16},{color:"grey",party:"Democratic",text:"Arizona",value:11}]; 
 

 
var result = data.reduce(function(hash) { 
 
    return function(prev, curr) { 
 
    if (hash[curr.color]) { 
 
     hash[curr.color].children.push({ 
 
     text: curr.text, 
 
     value: curr.value, 
 
     style: { 
 
      backgroundColor: curr.color 
 
     } 
 
     }); 
 
    } else { 
 
     hash[curr.color] = {}; 
 
     hash[curr.color].children = hash[curr.color].children || []; 
 
     prev.push({ 
 
     text: curr.party, 
 
     style: { 
 
      backgroundColor: curr.color 
 
     }, 
 
     children: hash[curr.color].children 
 
     }); 
 
     hash[curr.color].children.push({ 
 
     text: curr.text, 
 
     value: curr.value, 
 
     style: { 
 
      backgroundColor: curr.color 
 
     } 
 
     }); 
 
    } 
 
    return prev; 
 
    }; 
 
}(Object.create(null)), []); 
 

 
console.log(result);
.as-console-wrapper{top: 0;max-height: 100%!important;}

날, 덕분에 이에 대한 의견을 알려주십시오!

+1

@NealJones가 내 생각을 알려 주셔서 감사합니다. – kukkuz

+2

매우 깨끗합니다! – nardecky

+0

@kukkuz에 답변 해 주셔서 감사합니다. 큰 도움이되었습니다. 나는 당신이보기 위하여 걱정하는 경우에 이것과 관련되었던 무언가를 알아 내기 실제로 시도하고있다. 감사! http://stackoverflow.com/questions/40368831/fine-tuning-hash-to-dynamically-create-zingcharts-treemap-array –