Как нарисовать направленный путь на карте в хай-чартах?

Question

Я пытаюсь реализовать карты High-Chart с маршрутами полетов, как это Карты High-Chart с маршрутами полетов , чего я хочу добиться, так это чтобы маршруты показывали что-то вроде этого Ожидаемый результат .Есть ли в любом случае, чтобы достичь этого с помощью карт Highchart?

любые предложения будут оценены, заранее спасибо.

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

Я не уверен, что ваше изображение и вопрос совпадают, но я предполагаю, что вы хотите знать, как нарисовать направленный путь .Для этого я бы использовал встроенные маркеры SVG .Вы также можете создавать маркеры в Highcharts:

  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'
            }]
          });
      }
    }
  },

Затем в CSS соедините пути с маркерами:

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

И демо: https://jsfiddle.net/BlackLabel/xvhesL2n/

Если выхотите изменить форму пути, просто измените метод pointsToPath.В моей демонстрации выше вы можете наблюдать прямые линии вместо дуг:

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