Индикатор над гистограммой на графике

Question

У нас есть график высоких графиков, отображающий бары для прохождения, чести, неудачи в курсе.Диаграмма показывает процент студентов для каждого в виде вертикальной черты.Я хотел бы, чтобы индикатор над шкалой соответствовал показаниям конкретного учащегося.Так, например, если студент получил Pass для курса, над панелью Pass будет какой-нибудь индикатор / график.Смотрите изображение в качестве примера

Answer 1

Это можно сделать с помощью Highcharts.SVGRenderer

---

1. Пользовательский путь, используя метод renderer.path() (например, стрелка):

arrow = chart.renderer.path([
  'M', x, y,
  'L', x - size, y - size,
  'L', x - size / 3, y - size,
  'L', x - size / 3, y - 3 * size,
  'L', x + size / 3, y - 3 * size,
  'L', x + size / 3, y - size,
  'L', x + size, y - size,
  'z'
]).attr({
  fill: 'orange',
  stroke: '#000',
  'stroke-width': 1
}).add().toFront();

Демо-версия:

• https://jsfiddle.net/BlackLabel/aor76xtn/

Справочник по API:

• https://api.highcharts.com/class-reference/Highcharts.SVGRenderer#path

---

2.Изображение с использованием renderer.image() метода:

arrow = chart.renderer.image(
  'https://www.highcharts.com/samples/graphics/sun.png',
  x - size / 2,
  y - size,
  size,
  size
).add().toFront();

Демо-версия:

• https://jsfiddle.net/BlackLabel/upyx3z0m/

Справочник по API:

• https://api.highcharts.com/class-reference/Highcharts.SVGRenderer#image