javascript - 如何使用 highcharts 渲染整体数据标签？

Question

我无法显示下表中数据标签的 targets 变量。出于某种原因，系列数据标签仅显示 targetsAdj 值。我尝试在 y 轴上添加堆叠标签，但没有用。还有什么办法可以做到这一点？

ar targets =  [<?php echo $gg[0][24].",".$gg[0][20].",".$gg[0][26].",".$gg[0][22].""; ?>],
mcbf =  [ <?php echo $gg[0][16].",".$gg[0][17].",".$gg[0][18].",".$gg[0][19].""; ?>],
targetsAdj = [],
attagg=[],
calc,
calc2;
for (var i=0;i<targets.length;i++) {
  calc = targets[i] >= mcbf[i] ? targets[i] - mcbf[i] : 0;
  targetsAdj.push(calc);
}
for (var i=0;i<mcbf.length;i++) {
  calc2 = (mcbf[i]/targets[i])>=0.7 ? {y:mcbf[i],color:'#1de9b6',borderColor:'#00bfa5'} : ((mcbf[i]/targets[i])>=0.4 ? {y:mcbf[i],color:'#ffeb3b',borderColor:'#fdd835'}:{y:mcbf[i],color:'tomato',borderColor:'#d84315'});
  attagg.push(calc2);
}
$('#attivazioni').highcharts(
{
  "colors": 
  ["tomato"
  , "lime"
  , "rgba(139,188,33,.5)"
  , "rgba(145,0,0,.5)"
  , "rgba(26,173,206,.5)"
  , "rgba(73,41,112,.5)"
  , "rgba(242,143,67,.5)"
  , "rgba(119,161,229,.5)"
  , "rgba(196,37,37,.5)"
  , "rgba(166,201,106,.5)"],

  "chart": {
    "zoomType": "x",
    "showAxis": true,
    "alignTicks": true,
//"height": 300,
"style": {
  "fontFamily": "Helvetica, Arial, sans-serif",
  "color": "#333"
},
"backgroundColor": "#ffffff"
},
"title": {
  "text": " "
},
"xAxis": [{
  "tickmarkPlacement": "on",
  "labels": {
    "style": {
      "fontSize": "10px",
      "color": "#333"
    },
    "useHTML": true
  },
  "gridLineColor": "lightgrey",
  "gridLineWidth": 0,
  "categories": ["<span style=\"font-size:12px\"><b>Lead</span>"
  , "<span style=\"font-size:12px\"><b>Lvc</span>"
  , "<span style=\"font-size:12px\"><b>Push</span>"
  , "<span style=\"font-size:12px\"><b>AddOn</span>"]
}],
"yAxis": [{
  "alternateGridColo": "null",
  "minorTickInterval": "auto",
  "lineColor": '#000',
  "tickWidth": "1",
  "tickColor": '#000',
  "gridLineColor": "#C0C0C0",
  "gridLineWidth": 1,
  "lineColor": "#C0C0C0",
  "lineWidth": 1,
  "endOnTick": true,
  "min": 0,
  "labels": {
    "formatter": function () {
      return '%' + this.axis.defaultLabelFormatter.call(this);
    } ,
    "style": {
      "fontSize": "10px",
      "color": "black"
    }
  },
  stackLabels: {
    enabled: true,
    style: {
      fontWeight: 'bold',
      color: (Highcharts.theme && Highcharts.theme.textColor) || 'gray'
    },
    formatter: function() {
      return  Highcharts.numberFormat(this.total, 2, ',');
    }
  },
  title: {
    text: '',
    style: {
      display: 'none'
    }
  },
  subtitle: {
    text: '',
    style: {
      display: 'none'
    }
  },
}],
"legend": {
  "enabled": false
},
"navigation": {
  "buttonOptions": {
    "enabled": false
  }
},
"plotOptions": {
  "series": {
    "dataLabels": {
      "enabled": true,
      "style": {
        "color": "#333"
      },
      "crop": false,
      "overflow": "none"
    },
    "shadow": false,
    "marker": {
      "enabled": false
    }
  },
  "column": {
    "grouping": false,
    "stacking": "percent",
    "shadow": false
  }
},
"credits": {
  "enabled": false
},
"tooltip": {
  "enabled": false,
  "shared": true,
  "valueDecimals": 0
},
"series": [{
  "name": "Target",
  "type": "column",
  "color": "rgba(140, 131, 131, 0.49)",
  "borderColor": "#B0BEC5",
  "borderWidth": 2,
  "data": targetsAdj,
  "dataLabels": {
    y:-18,
    verticalAlign:'top',
    "formatter": function() {
      if (this.series.index == 0) return targets[this.point.x];
      else return this.y;
    }
  }
},{
  "name": "SELLS",
  "type": "column",
  "data": attagg,
  "color": "#1de9b6",
  "borderColor": "grey",
  "borderWidth": 2,
  "zIndex": 10
} ]
});

Answer 1

我通过将系列数据标签设置为 false 来解决。并将 yaxis 设置更改为:

yAxis: {
  min: 0,
  max: 105,
  endOnTick: false,
  title: {
    text: null
  },
  stackLabels: {
enabled: true,
style: {
  fontWeight: 'bold',
  color: 'black'
}
}
},