Highcharts堆疊條形圖 - 解析JSON以形成系列

Question

我正在學習使用highcharts創建堆積條形圖/柱形圖。我從pojo類獲得的json數據有三個屬性 - 日期，狀態和計數。在某一天，我可能沒有記錄某一特定狀態或多條記錄。這是JSON的外觀：

[{"dateV":"2015-11-16","status":"A","count":10},{"dateV":"2015-11-16","status":"B","count":15},{"dateV":"2015-11-15","status":"A","count":5},{"dateV":"2015-11-14","status":"A","count":10},{"dateV":"2015-11-14","status":"B","count":10},{"dateV":"2015-11-14","status":"C","count":10}] 

此數據現在處於arraylist中。日期是這裏的關鍵。圖表上的X軸會有日期。 Y軸應顯示堆疊的所有狀態值。我能夠創建圖表，但它是完全錯誤的，我想我知道爲什麼。我沒有正確分組數據。我創建了多個系列 - 分類爲1，每個分類爲不同的狀態值。考慮到這是我如何填充圖表，我應該如何創建類別和數據系列？

var categData = []; 
var statusACountData = []; 
var statusBCountData = []; 
$.getJSON(url, function(response) {     
    $.each(response, function(i, item) { 
     var dateVal=response[i].dateV; 
     var statusVal=response[i].status; 
     var countVal=response[i].count;     
     console.log(dateVal+"-"+statusVal+"-"+countVal); 

     ******LOGIC TO CREATE SERIES***** 

    }); 
    $('#chartDiv').highcharts({ 
       chart : { 
        type : 'column' 
       }, 
       title : { 
        useHTML: true, 
        text : '<h3>StackedChart</h3>' 
       }, 

       xAxis : { 
        categories : categData , 
        crosshair : true 
       }, 
       yAxis: { 
        allowDecimals: false, 
        min: 0, 
        title: { 
         text: 'Count' 
        }, 
        stackLabels: { 
         enabled: true, 
         style: { 
          fontWeight: 'bold' 
         } 
        } 
       }, 
       plotOptions: { 
        column: { 
         stacking: 'normal', 
         dataLabels: { 
          enabled: true        
         } 
        } 
       }, 
       series : [ { 
        name : 'A', 
        data : statusACountData 
       },{ 
        name: 'B', 
        data : statusBCountData //This may increase.Lets consider i have only two status values. 
       } ] 
      }); 
}); 

Answer 1

CODEPEN：http://codepen.io/anon/pen/MKreQE

你的問題是過濾和映射，這裏的東西，你可以改善，讓你開始：

var filterMap = function (arr, status) { 
    return arr.filter(function(a) { return a.status === status; }).map(function(a) { return [status, a.count]; }) 
}; 

$.getJSON(url, function(response) { 
    $('#chartDiv').highcharts({ 
     chart : { 
      type : 'column' 
     }, 
     title : { 
      useHTML: true, 
      text : '<h3>StackedChart</h3>' 
     }, 

     xAxis : { 
      categories : categData , 
      crosshair : true 
     }, 
     yAxis: { 
      allowDecimals: false, 
      min: 0, 
      title: { 
       text: 'Count' 
      }, 
      stackLabels: { 
       enabled: true, 
       style: { 
        fontWeight: 'bold' 
       } 
      } 
     }, 
     plotOptions: { 
      column: { 
       stacking: 'normal', 
       dataLabels: { 
        enabled: true        
       } 
      } 
     }, 
     series : [ { 
      name : 'A', 
      data : filterMap(response, 'A') 
     },{ 
      name: 'B', 
      data : filterMap(response, 'B') 
     } ] 
    }); 
}); 

這應該是需要的結果。

Answer 2

嘗試下面的示例，其中xAxis具有dateValue，yAxis具有countVal和statusVal。不要忘了鏈接到您的jsonfile（在我來說，我使用jsonfile.json）：

var dateVal=[]; 
var statusVal=[]; 
var countVal=[]; 

$.getJSON("jsonfile.json", function(response) {     
    $.each(response, function(i, item) { 
     dateVal[i]=response[i].dateV; 
     statusVal[i]=response[i].status; 
     countVal[i]=response[i].count;     
     console.log(dateVal+"-"+statusVal+"-"+countVal); 
    }); 

$('#chartDiv').highcharts({ 
      chart : { 
       type : 'column' 
      }, 
      title : { 
       useHTML: true, 
       text : '<h3>StackedChart</h3>' 
      }, 

      xAxis : { 
       categories : dateVal , 
       crosshair : true 
      }, 
      yAxis: { 
       allowDecimals: false, 
       min: 0, 
       title: { 
        text: 'Count' 
       }, 
       stackLabels: { 
        enabled: true, 
        style: { 
         fontWeight: 'bold' 
        } 
       } 
      }, 
      plotOptions: { 
       column: { 
        stacking: 'normal', 
        dataLabels: { 
         enabled: true        
        } 
       } 
      }, 
      series : [ { 
       name : 'A', 
       //data : statusACountData 
       data:statusVal, 
      },{ 
       name: 'B', 
       //data : statusBCountData //This may increase.Lets consider i have only two status values. 
       data: countVal, 
      } ] 
     }); 

}）;