отмеченная точка на сплайновой диаграмме привязана к осям x и y

Question

У меня есть сплайн-диаграмма, которая помечена.

Мне нужны две пунктирные линии: одна от моей точки до ее x и одна от моей точки до ее y

Я искал решение или подсказка в верхнем графике API: https://api.highcharts.com/highcharts/series.spline.data.marker

Но я не нашел ничего соответствующего моим ожиданиям

Небольшой пример того, что у меня есть на Fiddle: https://jsfiddle.net/jdw9a8xg/1/

Highcharts.chart('container', {

xAxis: {
    categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
},

plotOptions: {
    series: {

    }
},

series: [{
    data: [{x: 1,y: 15, marker: {
    radius: 8,
    enabled: true
    }}, {x:2, y: 150}, {x:3, y: 70}]
}]
});

Спасибо

Answer 1

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

https://jsfiddle.net/BlackLabel/hbjftaw6/

Код:

  chart: {
    events: {
      render() {
        let chart = this,
          point = chart.series[0].points[0];

        //if exist - destroy after the resize
        if(point.xLine && point.yLine) {
            point.xLine.destroy();
            point.yLine.destroy();
        }

        point.xLine = chart.renderer.path(['M', chart.plotLeft, point.plotY + chart.plotTop,
            'L', point.plotX + chart.plotLeft, point.plotY + chart.plotTop
          ])
          .attr({
            'stroke-width': 1,
            stroke: 'red',
            dashstyle: 'ShortDash'
          })
          .add();

        point.yLine = chart.renderer.path(['M', chart.plotLeft + point.plotX, point.plotY + chart.plotTop,
            'L', point.plotX + chart.plotLeft, chart.plotHeight + chart.plotTop
          ])
          .attr({
            'stroke-width': 1,
            stroke: 'red',
            dashstyle: 'ShortDash'
          })
          .add();

      }
    }
  },

API: https://api.highcharts.com/highcharts/series.line.dashStyle

API: https://api.highcharts.com/class-reference/Highcharts.SVGRenderer#path