Highcharts треугольник (или любой тип указателя маркера) в столбцах с накоплением

Question

Я использую старшие диаграммы (для Angular 6) с накопленными столбцами / столбцами, и я хочу добиться чего-то подобного, как показано на следующем рисунке:

То, что я не могНе понимаю, как можно получить треугольные маркеры.

PS На рисунке показаны фиктивные данные, которые я нашел в интернете.

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