代码之家 › 专栏 › 技术社区 › hammies

pagex,pagey到chartx,charty的数据点不是coord highcharts

highcharts

-1

hammies · 技术社区 · 6 年前

是否有方法将整个页面的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的坐标可能不是现有图表中的数据系列。

1 回复 | 直到 6 年前

ppotaczek 6 年前

可以计算点相对于图表的像素位置并使用轴 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
            });
        }
    }
}

应用程序编程接口: https://api.highcharts.com/class-reference/Highcharts.Axis#toValue

现场演示: http://jsfiddle.net/BlackLabel/5pytc8mb/