ハイチャートを使用したリスクヒートマップ

Question

私は「リスクヒートマップ」で以下の画像を参照しています（泡を無視してください）。これまでヒートマップはこのfiddleを参照することができます。
矢印チャート、つまりベクトルチャートの上に矢印を追加する方法を教えてください。各セルの色について
サンプルコード：

events: { 
 
    load: function() { 
 
    var points = this.series[0].data, 
 
     lenY = this.yAxis[0].tickPositions.length - 1, 
 
     lenX = this.xAxis[0].tickPositions.length - 1, 
 
     x = lenX, 
 
     tmpX = 0, 
 
     y = 0, 
 
     j = 0; 
 

 
    $.each(points, function(i, p) { 
 

 
     if (p.x == 0 || p.y == 0) { 
 
     p.update({ 
 
      color: 'red' 
 
     }, false); 
 
     } else if (p.x > 0 && p.y > 0 && (p.y == x || (p.y + 1) == x)) { 
 
     p.update({ 
 
      color: 'green' 
 
     }, false); 
 

 
     if (p.y == x) 
 
      x--; 
 

 
     } else if (p.x > 1 && p.y > 0 && p.y > x) { 
 
     p.update({ 
 
      color: 'orange' 
 
     }, false); 
 
     } else if (p.x > 0 && p.y > 0 && x > 2) { 
 
     p.update({ 
 
      color: 'yellow' 
 
     }, false); 
 
     } 
 

 
    }); 
 

 
    this.isDirty = true; 
 
    this.redraw(); 
 
    } 
 
}

Answer 1

ラッパー次使用することができ、直列ラインの両端に矢印を追加するには：

(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); 

例：http://jsfiddle.net/w6kqwp9p/

関連トピックの関連するコメント：How to add arrow to end of line while using type scatter