Highchart-Serie von JSON Array

Question

Ich mache gerade eine Webanwendung, wo ich versuche, Daten von einem Servlet an eine JSP zu übergeben, so dass es in einem Highchart verwendet werden kann. Ich erstelle ein JSON-Array von dynamischen Objekten und übermittele es mit AJAX an meine JSP. Ein Beispiel JSON-Array wie folgt aussieht:

[{"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"}] 

ich jedes dieser Arrays als HighChart Serie verwendet werden soll, wo "name" der Name der Serie ist und "data" ist ein Array darstellt monatlichen Umsatz. Nach Tonnen Beispiele lesen, versuche ich immer noch erfolglos um das Array von meinem AJAX Erfolg Funktion mit etwas entlang der Linien von zu analysieren:

$.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); 
       }); 
      } 

ich, dass ich in den $.each die Daten vorbei richtig bin nicht wissen, aber das ist das erste Mal, dass ich mit AJAX, JSON oder Highcharts arbeite, also sag mir bitte, wie ich das beheben kann!

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 
     }); 
    }); 

Behälter ist Diagramm Eltern-Element-ID, die in dem Sie Ihr Diagramm platzieren

nur Ihre DataObj in Serie Option fügen Sie den Code in Highchart.In Sie nicht erwähnt haben, wo sie platziert wird.

DEMO