Нарисуйте символы между барами в старших чартах

Question

Я хочу нарисовать символ между столбцами, как показано на рисунке Возможно ли в старших чартах?

Answer 1

Вы можете создать треугольник в качестве пользовательской фигуры, затем использовать эту фигуру и установить ее в качестве точки разброса (или фиксированной позиции, или других параметров). Вот хороший ответ относительно создания фигур: https://stackoverflow.com/a/27591082/8376046

Создание пользовательской формы треугольника:

Highcharts.SVGRenderer.prototype.symbols.supertri = function(x, y, w, h) {
  return ['M', x + w/2, y - h,
    'l', w, h,
    's', w * 1.1, h * 0.9, w * 0.1,  h * 1.8,
    'l', -w , h,
    's', -w * 2.0, h * 2.3,  -w * 1.8,  -h * 0.5,
    'l', w * 0, -h * 3.4,
    's', -w * 0.1,  -h * 2.0,  w * 1.5, -h * 0.1,
    'z'
  ];
};
if (Highcharts.VMLRenderer) {
  Highcharts.VMLRenderer.prototype.symbols.supertri = Highcharts.SVGRenderer.prototype.symbols.supertri;
}

Создание поддельной серии для использования этой формы:

series: [
  ...
  ,{
    type: 'scatter',
    pointStart: 0.5,
    data: [20,20,20],
    marker: {
      symbol: 'supertri',
      radius: 2,
      fillColor: 'black'
    },
    showInLegend: false,
    enableMouseTracking: false
}]

Highcharts.SVGRenderer.prototype.symbols.supertri = function(x, y, w, h) {
    return ['M', x + w/2, y - h,
      'l', w, h,
      's', w * 1.1, h * 0.9, w * 0.1,  h * 1.8,
      'l', -w , h,
      's', -w * 2.0, h * 2.3,  -w * 1.8,  -h * 0.5,
      'l', w * 0, -h * 3.4,
      's', -w * 0.1,  -h * 2.0,  w * 1.5, -h * 0.1,
      'z'
    ];
  };
  if (Highcharts.VMLRenderer) {
    Highcharts.VMLRenderer.prototype.symbols.supertri = Highcharts.SVGRenderer.prototype.symbols.supertri;
  }
  chart = new Highcharts.Chart({

    chart: {
      renderTo: 'container',
      type: 'column',
    },
    yAxis: {
      title: {
        text: 'axis title',
        useHTML: true,
        style: {
          "-webkit-transform": "rotate(90deg)",
          "-moz-transform": "rotate(90deg)",
          "-o-transform": "rotate(90deg)"
        }
      }
    },
    series: [{
      data: [80, 40, 20, 10],
      }, {
      	type: 'scatter',
        pointStart: 0.5,
        data: [20,20,20],
        marker: {
          symbol: 'supertri',
          radius: 2,
          fillColor: 'black'
        },
        showInLegend: false,
        enableMouseTracking: false
      }]
  });

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<div id="container" style="height: 400px; max-width: 800px; margin: 0 auto"></div>

Рабочий пример: http://jsfiddle.net/ewolden/L05xzzka/4/