如何在 highcharts 中的 map 上绘制有向路径？

Question

I am trying to implement highcharts maps with flight routes like this Highchart-maps with flight routes , what i want to achieve is, the routes needs to be shown something like this expected output . is there anyway to achieve this using highchart maps?

any suggestions would be appreciated, Thanks in advance.

function pointsToPath(from, to, invertArc) {
var arcPointX = (from.x + to.x) / (invertArc ? 2.4 : 1.9),
    arcPointY = (from.y + to.y) / (invertArc ? 2.4 : 1.9);
return 'M' + from.x + ',' + from.y + 'Q' + arcPointX + ' ' + arcPointY +
        ',' + to.x + ' ' + to.y;

}

Answer 1

I'm not sure if your image and question are the same, but I assume you want to know how to draw a directed path . To achieve this I would use built-in SVG's markers . You can create markers in Highcharts too:

  chart: {
    events: {
      load: function () {
        this.renderer
          .definition({
            tagName: 'marker',
            id: 'markerArrow',
            refY: 5,
            refX: 9,
            markerWidth: 11,
            markerHeight: 11,
            orient: 'auto',
            children: [{
              tagName: 'path',
              d: 'M 0 0 L 10 5 L 0 10 Z',
              fill: Highcharts.getOptions().colors[3],
              'stroke-width': 1,
              stroke: '#000000'
            }]
          });
      }
    }
  },

Then, in CSS, connect paths with markers:

.highcharts-series-3 .highcharts-point {
  marker-end: url(#markerArrow)
}

And demo: https://jsfiddle.net/BlackLabel/xvhesL2n/

If you want to change the shape of a path, simply modify pointsToPath method. In my demo above you can observe straight lines instead of arcs:

function pointsToPath(from, to, invertArc) {
    return 'M' + from.x + ',' + from.y + 'L' + to.x + ',' + to.y;
}