2014-11-20 3 views
0

나는 포럼에 처음 오르고 나의 차트를 완성하는데 도움을 얻을 수 있기를 바랍니다! 내 문제는 드릴 다운에서 json 파일을 호출하는 것입니다. 이것은 json (예를 들어)을 호출하여 얻을 수있는 결과입니다. http://jsfiddle.net/1dmaduwg/2/ 이것은 첫 번째 json 파일을 호출하기 위해 작성한 html 코드 및 json 코드입니다.하이 차트 : 드릴 다운에서 JSON 사용

HTML

<!DOCTYPE html> 

    <html> 
    <head> 
     <title>CHART_1</title> 
     <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
     <script type="text/javascript" src="http://code.highcharts.com/highcharts.js"></script> 
     <script type="text/javascript" src="http://code.highcharts.com/modules/drilldown.js"></script>  
    </head> 

    <body> 
     <h1 style="background: center; text-align: center; color: #E52B50"> ----------> TEST HIGHTCHARTS <----------</h1> 
    <div id="container" style="width: auto; height: 400px; max-width: 1000px; margin: auto"> 
    <script type="text/javascript"> 
    $(function() { 
     Highcharts.setOptions({ 
      colors: ['#C80815', '#404040'] 
     }); 

    $(document).ready(function() { 

      var options = { 
        chart: { 
         renderTo: 'container', 


        backgroundColor: '#EFEFEF', 
        borderColor: '#FF0000', 
        borderWidth: 2, 
        borderRadius: 10, 
        inverted: false, 
        type: 'column' 
        }, 
        title: { 
         text: 'ACTIVITIES MANAGEMENT ', 
         x: -20 
        }, 
        subtitle: { 
         text: '', 
         x: -20 
        }, 
        xAxis: { 
         categories: [] 
        }, 
        yAxis: { 
         title: { 
          text: 'Activity' 
         }, 
         plotLines: [{ 
          value: 0, 
          width: 1, 
          color: '#808080' 
         }] 
        }, 
        tooltip: { 
         formatter: function() { 
           return '<b>'+ this.series.name +'</b><br/>'+ 
           this.x +': '+ this.y; 
         } 
        }, 
        legend: { 
         enabled: true 
        }, 
       plotOptions: { 
        column: { 

        dataLabels: { 
         enabled: true, 
         color: (Highcharts.theme && Highcharts.theme.dataLabelsColor) || 'white'}, 
       } 
       }, 

        series: [], 

      } 

       $.getJSON("test_1.json", function(json) { 
        options.xAxis.categories = json[0]['data']; 
        options.series[0] = json[2];    
        options.series[1] = json[3]; 
        chart = new Highcharts.Chart(options); 
       }); 
      }); 
      }); 

    </script> 
    </div> 

    </body> 
    </html> 

test_1.json

[ 
{ 
"name": "user_name", 
"data": ["user_1", "user_2", "user_3", "user_4"] 
}, 
{ 
"name": "user_id", 
"data": ["052193002", "052193007", "052193013", "052193004"] 
}, 
{ 
"name": "MANAGED", 
"data": [52, 13, 42, 10] 
}, 
{ 
"name": "TO MANAGE", 
"data": [12, 3, 32, 1] 
} 
] 

내가 드릴 다운 시리즈의 각 사용자에 대한 올바른 데이터를 원하는 열 또는 사용자 이름을 클릭

. 은 올바른 방법이며 json (test_2)을 변경하여 데이터를 분리해야합니다.

누구든지 정확한 코드를 작성하여 드릴 다운에 test_2.json을 삽입 할 수 있습니까?

test_2.json

//USER_1 
[ 
{ 
"name": "activity_name", 
"data": [ "Activity 1", "Activity 2", "Activity 3"] 
}, 
{ 
"name": "MANAGED", 
"data": [13, 12, 27] 
}, 
{ 
"name": "TO MANAGE", 
"data": [3, 4, 5] 
} 
], 
//USER_2 
[ 
{ 
"name": "activity_name", 
"data": [ "Activity 1", "Activity 2", "Activity 3"] 
}, 
{ 
"name": "MANAGED", 
"data": [3, 7, 3] 
}, 
{ 
"name": "TO MANAGE", 
"data": [1, 0, 2] 
} 
], 
//USER_3 
[ 
{ 
"name": "activity_name", 
"data": [ "Activity 1", "Activity 2", "Activity 3"] 
}, 
{ 
"name": "MANAGED", 
"data": [13, 17, 12] 
}, 
{ 
"name": "TO MANAGE", 
"data": [13, 7, 12] 
} 
], 
//USER_4 
[ 
{ 
"name": "activity_name", 
"data": [ "Activity 1", "Activity 2", "Activity 3"] 
}, 
{ 
"name": "MANAGED", 
"data": [5, 3, 2] 
}, 
{ 
"name": "TO MANAGE", 
"data": [0, 0, 1] 
} 
] 

여러분 모두 감사합니다!

답변

1

별도의 파일에 투표 할 것입니다.

사용자가 필요없는 데이터를 다운로드하도록 강요하지 않으면 차트가 더 좋고 연결 대역폭이 낮아지는 것이 좋습니다.

관련 문제