JSON 배열의 하이 차트 시리즈

Question

현재 하이 레벨에서 사용할 수 있도록 서블릿에서 JSP로 데이터를 전달하려고하는 웹 애플리케이션을 만들고 있습니다. 나는 동적 객체의 JSON 배열을 만들고 있는데, JSP로 AJAX를 사용하여 전달하고있다. 예 JSON 배열은 다음과 같습니다

[{"data":[2,4,6,6,0,0,0,0,0,0,0,0],"name":"DESIGN"}, 
{"data":[1,0,0,1,0,0,0,0,0,0,0,0],"name":"COLOUR"}] 

내가 그 배열의 각 "name"이 시리즈의 이름이고 "data" 월간 판매를 나타내는 배열입니다 HighChart 시리즈로 사용하기를 원한다. 예제의 톤을 읽은 후, 나는 아직도 실패의 라인을 따라 뭔가 내 AJAX 성공 함수에서 배열을 분석하려고 : 내가 제대로 $.each에 데이터를 전달하고 있지 않다 알고

$.ajax({ 
      type : 'GET', 
      url : '/InventoryManagement/dashboardData', 
      datatype : 'json', 
      success : function(data) { 
       var dataObj = JSON.parse(data); 
       var seriesArr = new Array(); 
       $.each(dataObj, function(key, d) { 
        var series = { 
         name : key, 
         data : [] 
        }; 
        series.key = key; 
        series.d = d; 

        seriesArr.push(series); 
       }); 


       $(function() { 
        var options = { 
         chart : { 
          renderTo : 'overallSales', 
          type : 'column' 
         }, 
         title : { 
          text : 'Overal Unit Sales' 
         }, 
         xAxis : { 
          categories : [ 'Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 
            'Aug', 'Sep', 'Oct', 'Nov', 'Dec' ] 
         }, 
         yAxis : { 
          title : { 
           text : 'Units sold' 
          } 
         }, 
         series : seriesArr 

        }; 
        var chart = new Highcharts.Chart(options); 
       }); 
      } 

, 그러나 이것은이다 내가 AJAX, JSON 또는 Highcharts로 작업 할 때 처음으로이 문제를 해결하는 방법을 알려주십시오!

Answer 1

$(function() { 
     $('#container').highcharts({ 
      chart: { 
       type: 'column' 
      }, 
      title: { 
       text: 'Overal Unit Sales' 
      }, 
      xAxis: { 
       categories: [ 'Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 
        'Aug', 'Sep', 'Oct', 'Nov', 'Dec' ], 
       title: { 
        text: null 
       } 
      }, 
      yAxis: { 
       min: 0, 
       title: { 
        text: 'Value', 
        align: 'high' 
       }, 
       labels: { 
        overflow: 'justify' 
       } 
      }, 
      tooltip: { 
       valueSuffix: 'unit' 
      }, 
      plotOptions: { 
       bar: { 
        dataLabels: { 
         enabled: true 
        } 
       } 
      }, 
      legend: { 
       layout: 'vertical', 
       align: 'right', 
       verticalAlign: 'top', 
       x: -40, 
       y: 80, 
       floating: true, 
       borderWidth: 1, 
       backgroundColor: ((Highcharts.theme && Highcharts.theme.legendBackgroundColor) || '#FFFFFF'), 
       shadow: true 
      }, 
      credits: { 
       enabled: false 
      }, 
      series: dataObj 
     }); 
    }); 

컨테이너는 차트를 두는 곳 배치되는 위치를 언급하지 않았다

은 당신의 코드를 Highchart.In 직렬 옵션으로 dataObj를 추가 차트 상위 요소 ID입니다.

DEMO