风险热图使用Highcharts

Question

我正在研究＆＃34; Risk HeatMap＆＃34;参考下图（忽略气泡）。到目前为止，我能够进行热图参考这个fiddle。
请指导我如何在Highcharts（矢量图表）之上添加箭头。
每个单元格中颜色的示例代码：

＆＃13;

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

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