Highcharts - 获得每个堆叠类别的最低位置

Question

my current jsfiddle

我正在尝试将每个价格的数据标签降低到每个堆叠类别的底部。

使用绝对位置的问题是每个类别都有不同的动态高度（数据来自db）。

formatter: function() {
                        return '<div style="text-align: center; position: relative; top:9px">'+ this.series.name +
                               '</div><div style="text-align: center; position: relative; left: -63px; top:-10px; border-bottom: 1px solid grey; width:70px;">$'+ this.y +'</div>';
                    },

另外我不想使用verticalAlign：bottom因为我需要内部数据标签位于每列的中间，所以我在这里遇到了相反的问题（中间内部数据标签）。

• 忽略只有最高价才可见的事实。不知道为什么它不在jsfiddle工作，在我的应用程序中工作正常。

Answer 1

您可以通过this.point.shapeArgs访问每个堆栈的坐标。底部是shapeArgs.y + shapeArgs.height - 堆栈放置在已翻译的组中 - 因此您需要调整组翻译的位置this.point.series.group（它有translateX和translateY ）

我的解决方案不使用格式化程序，而是创建自定义标签并定位它们。元素是svg元素，而不是html。

制作标签的功能：

  function makeStackLabels() {
    const chart = this,
      renderer = chart.renderer,
      labels = chart.stackLabelsRendered,
      series = chart.series,
      lineLength = 75;

    if (!labels) {
      series.forEach(series => {
        const point = series.data[0];
        if (point) {
          point.label = renderer.g().add(series.group);
          renderer.path({
            d: 'M 0 0 L ' + lineLength + ' 0',
            stroke: 'black',
            'stroke-width': 1
          }).add(point.label);

          const text = renderer.text('$' + point.y, -9999, -5).add(point.label);
          text.attr({
            x: (lineLength - text.getBBox().width) / 2
          }).css({
            fontSize: '11px',
            fontWeight: 'bold'
          })
        }
      })
      chart.stackLabelsRendered = true;
    }

    series.filter(series => series.visible).forEach((series, i, arr) => {
      const point = series.data[0];
      const label = point && point.label;
      if (label) {
        const shapeArgs = point.shapeArgs;
        point.label.attr({
          translateX: shapeArgs.x - label.getBBox().width,
          translateY: shapeArgs.y + shapeArgs.height - (i === arr.length - 1 ? 1: 0) // for the last label we need to move it up a little so the line wont be clipped
        })
      }
    })
  }

在加载时设置功能并重绘

  chart: {
    renderTo: 'container',
    type: 'column',
    events: {
      load: makeStackLabels,
      redraw: makeStackLabels
    }
  },

实例和输出

http://jsfiddle.net/w28hmp94/

Answer 2

您可以更改位格式化功能，让您在serie div中获得$ amount。 但它与盒子不完全一致......

$(function () {
    var chart;
    $(document).ready(function() {
        chart = new Highcharts.Chart({
            chart: {
                renderTo: 'container',
                type: 'column'
            },
            
            xAxis: {
            	title: null,
                        lineWidth: 0,
                        minorGridLineWidth: 0,
                        gridLineColor: 'transparent',
                        lineColor: 'transparent',
                        labels: {
                            enabled: false
                        },
                        minorTickLength: 0,
                        tickLength: 0
            },
            
            yAxis: {
            	title: null,
                        lineWidth: 0,
                        minorGridLineWidth: 0,
                        gridLineColor: 'transparent',
                        lineColor: 'transparent',
                        labels: {
                            enabled: false
                        },
                        minorTickLength: 0,
                        tickLength: 0
            },
            
            legends: {enabled: false},
           
            plotOptions: {

                series: {

                    lineWidth: 15,

                },
                column: {

                    stacking: 'normal',
                    dataLabels: {
                        enabled: true,
                        useHTML: true,
                        formatter: function() {
                            return '<div style="text-align: center; position: relative; top:9px;">'
                            + this.series.name
                            + '<div style="position: relative; left: -70px; border-bottom: 1px solid grey; width:70px;top:0px">$'
                            + this.y 
                            + '</div></div>';
                        },
                    },

                    pointWidth: 50,
                },
            },
            series: [{

                name: '+8',
                data: [3656],

            }, {

                name: '5-8',
                data: [3498],

            }, {

                name: '3-5',
                data: [3116],

            }, {

                name: '1-3',
                data: [4454],

            }, {

                name: '0',
                data: [1465],

            }

            ]
        });
    });
    
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>

<div id="container" style="min-width: 400px; height: 400px; margin: 0 auto"></div>

Answer 3

我会通过为辅助数据标签使用单独的系列来实现此目的：

示例：

    {
      type: 'scatter',
      data: [
        [-0.05, 0],
        [-0.05, 1465],
        [-0.05, 4454],
        [-0.05, 3116],
        [-0.05, 3498]
      ]
    }

更新小提琴：

• http://jsfiddle.net/jlbriggs/WxWvQ/17/

<强>输出：