Javascript 使用Highcharts的风险热图

我正在制作“风险热图”，请参阅下图（忽略气泡）。到目前为止，我可以做热图参考这一点。
请指导我如何在高图表（即向量图）顶部添加箭头
每个单元格中颜色的示例代码：

事件：{
加载：函数（）{
var points=this.series[0]。数据，
lenY=this.yAxis[0].tickPositions.length-1，
lenX=this.xAxis[0].tickPositions.length-1，
x=lenX，
tmpX=0，
y=0，
j=0；
$。每个（点、功能（i、p）{
如果（p.x==0 | | p.y==0）{
p、 更新({
颜色：“红色”
}，假）；
}如果（p.x>0&&p.y>0&&p.y==x | |（p.y+1）==x））{
p、 更新({
颜色：“绿色”
}，假）；
如果（p.y==x）
x--；
}否则如果（p.x>1&&p.y>0&&p.y>x）{
p、 更新({
颜色：“橙色”
}，假）；
}否则如果（p.x>0&&p.y>0&&x>2）{
p、 更新({
颜色：“黄色”
}，假）；
}
});
this.isDirty=true；
这个；
}
}

要将箭头添加到系列行的末尾，可以使用以下包装器：

(function(H) {
    H.wrap(H.Chart.prototype, 'getContainer', function(proceed) {
      proceed.apply(this);

      var chart = this,
        renderer = chart.renderer,
        defOptions = chart.options.defs || [],
        i = defOptions.length,
        def,
        D;

      while (i--) {
        def = defOptions[i];
        var D = renderer.createElement('marker').attr({
          id: def.id,
          viewBox: "0 0 10 10",
          refX: 1,
          refY: 5,
          markerWidth: 6,
          markerHeight: 6,
          orient: 'auto',
          fill: 'inherit',
        }).add(renderer.defs);
        renderer.createElement('path').attr({
          d: def.path,
          fill: 'white'
        }).add(D);
      }
    });

    H.wrap(H.Series.prototype, 'drawGraph', function(proceed) {
      proceed.apply(this);
      if (this.options.endMarker) {
        this.graph.element.setAttribute('marker-end', this.options.endMarker);
      }
    });
  })(Highcharts);

例如：

---

相关主题中的相关评论：

要添加自定义元素，如气泡和箭头，您可以使用Highcharts’对于气泡，您可以使用气泡类型系列-Hi@KacperMadej我需要实现定向箭头（忽略图像中的气泡），请参阅此。我已经介绍了渲染器，但不确定如何在我的场景中实现。关于这方面的任何指导都将不胜感激。好东西，当我们从数据库获取数据时，有没有什么方法可以使用任何循环动态添加散点图，从而不确定我们需要重复散点图多少次。@GeekExplorer是的，要动态添加系列，请使用。