WORK/JQUERY

Nwagon 차트에서 multi_column 값 넣기

im 수캥이 2018. 11. 27. 09:50

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
// 아래 두개 추가    
<link rel='stylesheet' href='/common/chart/Nwagon.css' type='text/css'>
<script src='/common/chart/Nwagon_no_vml.js'></script>
 
<body>
// chart div에 그래프 출력
<div class="mt40" id="chart">
    <script>
        var v_info = [];
        var name_info = []; 
        var maxVal = []; 
        var maxValPer = [];
        var title = '메뉴별 현황';
        var maxValue = 10;
        var increment = 1;
        var gab = 0;
 
        $.each(aJsonArray,function(key,json){
            var eachArr = new Array();
            var maxhArr = new Array();
            var maxPerArr = new Array();
            eachArr.push(json.fir); // 첫번째 배열값
            eachArr.push(json.sec); // 두번째 배열값
            maxhArr.push(json.fir); // 첫번째 큰값 구하기 위한 배열
            maxPerArr.push(json.sec); // 두번째 큰값 구하기 위한 배열
            maxVal.push(maxhArr);    // 첫번째 max값 배열 set
            maxValPer.push(maxPerArr); // 두번째 max 값 배열 set
            v_info.push(eachArr); // 첫번째 , 두번째 배열 set
                                    
        });
 
        // 그래프에 max값 넣어주기 위한 셋팅
        var max = Math.max.apply(null, maxVal)
        var max2 = Math.max.apply(null, maxValPer)
        if(max < max2){
            max = max2;
        }
        if((max + '').length < 3){
            gab = 10;
        }else{
            gab = 100;
        }
        increment = Math.ceil(max / 10);
 
 
        if(v_info != ""){
            var options = {
                'legend':{
                names: name_info,
                hrefs: []
                },
            'dataset':{
                    title:title,
                    values : v_info, // 위에 배열에 put 한 값임 결과는 [[1,2],[3,4]] 와 동일
                    colorset: ['#3366ff' , '#ff3399'],
                    fields : ['메뉴별 현황' , "전체비율"]
                    },
                    'chartDiv' : 'chart',
                    'chartType' : 'multi_column',
                    'chartSize' : {width:1000, height:500},
                    'minValue' : 0,
                    'maxValue' : max, // 위에서 구한 최대 값
                    'increment' : increment
                    };
            Nwagon.chart(options);
        }
 
    </script>
</div>
</body>
cs



소스는 위와 같다.

대충 설명을 하자면 value 값에는 [[1,2] , [3,4]] 와 같은 값이 들어가야 하는데

위에 반복문을 돌면서 값을 셋팅한다.


eachArr.push(json.fir);

eachArr.push(json.sec);


그리고 이 값을 다시 

v_info.push(eachArr);


이렇게 넣어주면 [[1,2] , [3,4]] 와 동일한 값이 된다.


max값과 increment 값 구하는 방법이야 다들 잘 이해 하실테니 pass...



아래 공감을 눌러주시면 많은 힘이 됩니다   : )  


'WORK > JQUERY' 카테고리의 다른 글

jquery disabled 처리 하기  (0) 2018.12.21
checkbox 값 배열에 담기  (1) 2018.12.12
jquery select box 제어  (0) 2018.10.05
required 기능 추가 제거  (0) 2018.09.04
setTimeout 사용하기  (0) 2018.07.20

'WORK/JQUERY'의 다른글

  • 현재글Nwagon 차트에서 multi_column 값 넣기

관련글

댓글

티스토리툴바