Highcharts 中具有单独数据的堆栈标签

Question

下午好，我正在整理一个使用 Highcharts stackLabels 的图表，它与这个完全一样：JSFiddle 但是我不希望它显示列值的总和，我希望它按项目显示一项在另一项之上，与我在下面模拟的打印相同：

Answer 1

为了按照您的预期设置 stackLabels，您需要使用 stackLabels.formatter 函数手动计算标签值。

接下来您要做的是对标签进行一些调整。您可以通过 stackLabels.y 字段来完成。

最后，不要忘记 stackLabels.useHTML 参数设置为 true。它使 <span> 和 </br> 元素将正确显示。请看下面的代码：

yAxis: {
  stackLabels: {
    style: {
      color: 'red'
    },
    enabled: true,
    useHTML: true,
    formatter: function() {
      var firstLabel = Math.round((this.points[0][1] - this.points[0][0]) * 10) / 10,
        secondLabel = this.points[0][0]

      return `<span>${firstLabel}</span></br>
              <span>${secondLabel}</span>`
    },
    y: -15
  }
}

您可以在此处阅读有关上述参数的更多信息：

实例：http://jsfiddle.net/r01nkgyn/

Highcharts 中具有单独数据的堆栈标签

stackLabels with separate data in Highcharts

javascript

highcharts

stacked-chart

drilldown