堆积条形图中的Highcharts三角形（或任何类型的标记指针）

Question

我正在使用高图表（用于Angular 6）堆叠的列/栏，我想要实现下图所示的内容：

我不知道如何获得的是三角形标记。

P.S。该图像显示了我在Internet上找到的伪数据。

Answer 1

使用Highcharts.SVGRenderer可以轻松完成此操作，该操作提供对Highcharts渲染层的直接访问以绘制原始形状。可以通过Highcharts.Chart.renderer访问现有图表的渲染器。检查下面的演示和代码。

  chart: {
    type: 'bar',
    events: {
      render: function() {
        var chart = this,
          yAxis = chart.yAxis[0],
          series = chart.series[0],
          trWidth = 5,
          trHeight = 8,
          used = [
            48,
            33,
            83,
            62
          ],
          svgText,
          svgArrow,
          text,
          yText,
          xText,
          yTr,
          xTr;

        if (chart.customSvgElems) {
          chart.customSvgElems.forEach(function(elem) {
            elem.destroy();
          });
        }

        chart.customSvgElems = [];

        series.data.forEach(function(serie, i) {
          text = used[i] + '% used';
          xText = serie.barX + serie.pointWidth / 2 + chart.plotTop + 3;
          yText = chart.plotLeft + chart.plotWidth / 2;
          svgText = chart.renderer
            .text(text, yText, xText)
            .add()
            .toFront();

          yTr = yAxis.toPixels(used[i]);
          xTr = serie.barX + serie.pointWidth + chart.plotTop;

          svgArrow = chart.renderer
            .path([
              'M', yTr, xTr,
              'L', yTr + trWidth, xTr + trHeight,
              'L', yTr - trWidth, xTr + trHeight,
              'z'
            ])
            .attr({
              fill: 'red',
              stroke: 'black',
              'stroke-width': 1
            })
            .add()
            .toFront();

          chart.customSvgElems.push(svgText);
          chart.customSvgElems.push(svgArrow);
        });
      }
    }
  }

基本演示： https://jsfiddle.net/BlackLabel/0ac2zk6h/1/
角度演示： https://codesandbox.io/s/y3kk252p41