图中条形上方的指示器

Question

我们有一个高图图表，显示课程中通过，荣誉和失败的条形图。图表以竖线显示每个学生的百分比。 我想在栏上方有一个指示器，表明正在查看的特定学生合适。因此，例如，如果学生获得了该课程的及格，则在及格栏上方会显示一些指示器/图形。以图片为例

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