Highcharts сложена гистограмма - разбор JSON для формирования серии

Question

Я учусь создать штабелированную диаграмму столбцов/столбцов, используя диаграммы. Данные json, которые я имею из класса pojo, имеют три свойства: дата, статус и количество. В определенный день у меня не было записей для определенного статуса или более одной записи. Вот как выглядит 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}] 

Данные находятся в архаисте прямо сейчас. Date - это ключ здесь. На оси X на графике будет дата. Ось Y должна отображать все статусные значения. Я могу создать график, но это совершенно неправильно, и я думаю, что знаю почему. Я не группирую данные должным образом. Я создал несколько серий - 1 для категории и по 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, 
      } ] 
     }); 

});