Html Highcharts-获取每个堆叠类别的底部位置

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

使用绝对位置的问题是，每个类别都有来自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>';
                    },

我也不想使用VistaLalIG:Burn，因为我需要内部数据标签在每个列的中间，所以在内部数据标签中间，我有相反的问题。

忽略只有最高价格才可见的事实。不知道为什么它不能在JSFIDLE中运行，在我的应用程序中运行良好。

---

您可以更改一个位格式化程序函数，将$amount放入seriediv中。 但它并没有和盒子完全对齐

$function{ var图； $document.readyfunction{ 图表=新的高点图表。图表{ 图表：{ renderTo:'容器'， 类型：“列” }, xAxis：{ 标题：空， 线宽：0， minorGridLineWidth:0， gridLineColor:'透明'， lineColor:'透明'， 标签：{ 已启用：false }, minorTickLength:0， 长度：0 }, 亚克斯：{ 标题：空， 线宽：0， minorGridLineWidth:0， gridLineColor:'透明'， lineColor:'透明'， 标签：{ 已启用：false }, minorTickLength:0， 长度：0 }, 图例：{enabled:false}， 打印选项：{ 系列：{ 线宽：15， }, 专栏：{ 堆叠：“正常”， 数据标签：{ 启用：对， 是的， 格式化程序：函数{ 回来 +this.series.name + '$' +这个 + ; }, }, 点宽度：50， }, }, 系列：[{ 名称：‘+8’， 数据：[3656]， }, { 名称：“5-8”， 数据：[3498]， }, { 名称：“3-5”， 数据：[3116]， }, { 名称：“1-3”， 数据：[4454]， }, { 名称：“0”， 数据：[1465]， } ] }; }; };

---

您可以通过this.point.shapeArgs访问每个堆栈的坐标。底部是shapeArgs.y+shapeArgs.height-堆栈放置在被转换的组中-因此您需要调整组translation 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
    }
  },

实例和输出

---

我将通过为辅助数据标签使用单独的系列来实现这一点：

例如：

更新小提琴：

输出：

---

底部对齐是这里的主要问题。假设我将数据的名称改为“0”，从1465改为13465，一切都是一团糟伟大的解决方案，尽管从这里继续下去对我来说很复杂，因为我需要在这里做更多的样式设计拉伸这条线而不是现有的类别边框，我根本没有学习svg。太棒了，正是我需要的

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