在 Highcharts 上显示单个图表

Question

您好，我在 Highcharts 中的代码有问题，我已经声明了我的系列，但它只显示一组图表。所有数据都设置在 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/