Показывает один график на Highcharts

Question

Здравствуйте, у меня проблема с моим кодом в Highcharts. Я уже объявил свою серию, но она показывает только 1 набор диаграмм. Все данные были установлены на var dataStr, на то, как данные, которые ставятся, я использую push на каждой передаваемой информации. Так что я думаю, что проблема с моим толчком?

var dataStr = [
  {name: 'JOB-182', problemReportCount: 0, totalCost: 50000, lostHour: 0, lostValue: 0},
  {name: 'JOB-185', problemReportCount: 0, totalCost: 3432.65, lostHour: 0, lostValue: 0},
  {name: 'JOB-188', problemReportCount: 4, totalCost: 5000, lostHour: 0, lostValue: 0},
  {name: 'JOB-189', problemReportCount: 0, totalCost: 1000, lostHour: 0, lostValue: 0}
];

var jRefs = [];
var prJRefs = [];
var prLostVals = [];
var prLostHours = [];
var totCosts = [];
for (var i = 0; i < dataStr.length; i++) {
    var jName = '' + dataStr[i].name;
    if (jName != '') {
        jRefs.push(jName);
        var prCount = dataStr[i].problemReportCount;
        if (prCount > 0) {
            prJRefs.push(jName);
            prLostVals.push(dataStr[i].lostValue);
            prLostHours.push(dataStr[i].lostHour);
            totCosts.push(dataStr[i].totalCost);
        }
    }
}

var genGraph = function() {
    $("#backButton").hide();

    $('#prGraph4').highcharts({
     chart: {
      type: 'column',
      plotBackgroundColor: '#F7F7F7'
     },
     title: {
      text: 'Problem Report'
     },
     subtitle: {
      text: 'Estimated Lost Values'
     },
     xAxis: {
      alternateGridColor: '#fff',
      categories: prJRefs
     },
     yAxis: {
      min: 0,
      title: {
       text: 'Amount'
      },
      stackLabels: {
       enabled: true,
       style: {
        fontWeight: 'bold'
       }
      }
     },
     plotOptions: {
      column: {
       stacking: 'normal',
      }
     },
     tooltip: {
      shared: true,
      formatter: function() {
       var s = '<b>' + this.x + '</b>';
       $.each(this.points, function() {
        var lostValue = this.y;
        s += '<br/><span style=" + dbl + "color:' + this.series.color + ';" + dbl + ">\u25CF</span> ' + this.series.name + ': <b>£</b> ' + lostValue.toFixed(2);
       });
       return s;
      }
     },
    series:[{
      name: 'Total Costs',
      data: totCosts,
      color: '#2ecc71',
      stack: 'total'
     }, {
      name: 'Estimated Lost Materials Value',
      data: prLostVals,
      color: '#e74c3c',
      stack: 'lost'
     }, {
      name: 'Estimated Lost Hours Price',
      data: prLostHours,
      color: '#e67e22',
      stack: 'lost'
     }] 
    });


};

Любая помощь будет очень цениться. Спасибо!

Answer 1

У вас есть только один видимый столбец, потому что только один набор данных удовлетворяет этому условию:

if (prCount > 0) {
    prJRefs.push(jName);
    prLostVals.push(dataStr[i].lostValue);
    prLostHours.push(dataStr[i].lostHour);
    totCosts.push(dataStr[i].totalCost);
}

Кроме того, все значения из серии: Estimated Lost Materials Value и Estimated Lost Hours Price равны 0.

Живая демоверсия: http://jsfiddle.net/BlackLabel/vu9ahfk5/