Highcharts 在点击后向系列添加新数据

Question

我试图在单击线上的位置后在样条图表上添加一个新点（到系列数据）。但是点点击事件没有 return 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 轴方法：

    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

Highcharts 在点击后向系列添加新数据

Highcharts add new data to series after click

javascript

highcharts

axis

spline