pageX, pageY to chartX, точки данных chartY не согласовывают старшие диаграммы

Question

Есть ли способ преобразовать координаты X и Y всей страницы в точку диаграммы?

Я знаю, что вы можете получить ее в обратном порядке.

var manualPt = {pageX:155, pageY: 242} //<--the point I want to display
//on the chart as a datapoint and not a chartX, chartY coordinate.

function onClick(e) {
    $('#report').text('x: ' + e.pageX+ ', y: ' + e.pageY).css({
        'position': 'absolute',
            'left': e.offsetX,
            'top': e.offsetY
    })
   //this would be the reverse.. knowing where the point on the chart is 
   //and then get pageX and pageY
}

var chart = new Highcharts.Chart({
    chart: {
        renderTo: 'container'
    },
    xAxis: {},
    tooltip: {
        enabled: false
    },
    series: [{
        data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4],
        events: {
            click: onClick
        }

    }]
});

http://jsfiddle.net/pinktoadette/yd6vrg4o/

Как мне это сделать?Также возможно, что координаты pageX и pageY не могут быть сериями данных в существующей диаграмме.

Answer 1

Вы можете рассчитать положение точки точки относительно диаграммы и использовать метод оси toValue для получения реальных данных:

chart: {
    renderTo: 'container',
    events: {
        load() {
            var chart = this,
                xAxis = chart.xAxis[0],
                yAxis = chart.yAxis[0],
                container = chart.renderTo,
                x = xAxis.toValue(manualPt.pageX - container.offsetLeft),
                y = yAxis.toValue(manualPt.pageY - container.offsetTop);

            this.series[1].addPoint({
                x: x,
                y: y
            });
        }
    }
}

API: https://api.highcharts.com/class-reference/Highcharts.Axis#toValue

Демонстрация в реальном времени: http://jsfiddle.net/BlackLabel/5pytc8mb/