2016-07-29 84 views
0

我正在做一個Web應用程序,我試圖將數據從一個servlet傳遞到一個JSP,以便它可以在一個Highchart中使用。我正在創建一個動態對象的JSON數組,並使用AJAX將它傳遞給我的JSP。一個例子JSON數組是這樣的:來自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"}] 

我希望每個那些陣列用作一個HighChart系列,其中"name"是該系列的名稱和"data"是代表每月銷售的數組。閱讀噸的例子之後,我仍然不成功嘗試的陣列從我的AJAX成功函數的線沿線的東西解析:

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

我知道我不是傳遞數據的$.each正確,但是這是我第一次使用AJAX,JSON或Highcharts,所以請告訴我如何解決這個問題!

+0

您是否已正確收到ajax響應?我的意思是dataObj –

+0

是的,'[{「data」:[2,4,6,6,0,0,0,0,0,0,0,0],「name」:「DESIGN」},{「數據「:[1,0,0,1,0,0,0,0,0,0,0,0],」name「:」COLOR「}]'從alert(data)'調用返回在成功功能。 –

+0

好的。那麼你在如何在條形圖中表示問題?我對嗎? –

回答

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

容器圖表的父元素的ID,你把你的圖表

只需添加您dataObj到一系列選項Highchart.In你的代碼中並沒有提及其中放置。

DEMO

+0

哦,我不知道我可以直接將dataObj傳遞給系列!非常感謝! –

+0

你很好 –