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/

pageX，pageY到chartX，chartY的数据点不一致

1 个答案: