javascript - Highcharts 单击后将新数据添加到系列中

Question

单击在线上单击的位置后，我尝试在样条图上添加一个新点(到系列数据)。但点单击事件不会返回 xAxis、yAxis(仅以像素为单位)。我决定计算点像素位置和点击之间的差异，但点不在点击位置添加。我做错了什么？这要怎么处理呢？

我的JS

var setDragStatus = function (status) {
    document.getElementById('dragstatus').innerHTML = status;
};

Highcharts.chart('container', {
  title: {
    text: 'Spline Drag&Drop'
  },
  plotOptions: {
    series: {
      turboThreshold: 4,
      minPointLength: 5,
      dragDrop: {
        draggableY: true,
        dragMaxY: 1,
      },
      point: {
        events: {
          click: function (e) {
            let pointPlotX = e.point.plotX
            let pointPlotY = e.point.plotY
            let pointX = e.point.x
            let pointY = e.point.y
            let clickX = e.chartX
            let clickY = e.chartY
            let pointDiffX = clickX / pointPlotX
            let pointDiffY = clickY / pointPlotY
            let newPointX = pointX * pointDiffX
            let newPointY = pointDiffY * pointY
            this.series.addPoint([newPointX, newPointY])
          }
        }
      },

    }
  },
  xAxis: {
    reversed: false,
    showFirstLabel: false,
    showLastLabel: true
  },
  series: [
    {
      name: 'spline top',
      data: [0, 0.3, 0.6, 1],
      type: 'spline'
    }
  ]
}

);

结果 - https://jsfiddle.net/antiaf/1hfuyjbr/

Answer 1

要计算 x 和 y 值，您可以使用 toValue Axis 方法:

    plotOptions: {
        series: {
            ...,
            point: {
                events: {
                    click: function(e) {
                        let series = this.series,
                            yAxis = series.yAxis,
                            xAxis = series.xAxis,
                            newPointX = xAxis.toValue(e.chartX),
                            newPointY = yAxis.toValue(e.chartY);

                        this.series.addPoint([newPointX, newPointY])
                    }
                }
            }
        }
    }

<小时/>

现场演示: https://jsfiddle.net/BlackLabel/hg81o4ej/

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