高图-折线图标记已选择点

Question

我的角度应用程序上有一个line-chart。我需要做的是单击图表的任何点以标记该点以将其与其余部分区分开。下面是我的图表配置：

highcharts = Highcharts;
  chartOptions = {
    chart: {
       type: "line"
       },
    credits: {
      enabled: false
    },
    title: {
      enabled: true,
      text: "Reach +1/" + this.xAxis.name,
      verticalAlign: "top",
      align: "left"
    },
    tooltip: {
      formatter: function (data) {
          return data.chart.userOptions.xAxis.title.text + ": " + this.x.toFixed(4) + "<br/>" +
              "Reach: " + this.y.toFixed(4);
      }
  },
    xAxis: {
      title: {
        text: this.xAxis.name
      },
    },
    yAxis: {
       title: {
          text: "Reach"
       }
    },
    series: [
      {
        name: this.xAxis.name,
        data: null,
        allowPointSelect: true,
        point: {
          events: {
            click: function(event) {
              this.yPoint = event.point.y;
              this.xPoint = event.point.x;
              this.filterOptimizationResults(this.xPoint, this.yPoint);
              }.bind(this)
            },
          },
          state: {
            select: {
              enabled: true
            }
          }
        }
      ]
    };

下面，我共享图表的屏幕以供参考：

例如，如果y选择点(25,75)，则需要将该点圈起来。

Answer 1

这是有关如何使用 point.update 和 events.click 功能实现点切换的基本示例。

演示：https://jsfiddle.net/BlackLabel/sh4o3enL/

point: {
  events: {
    click() {
      let point = this;

      if (point.marker && point.marker.enabled) {
        point.update({
          marker: {
            enabled: false
          }
        })
      } else {
        point.update({
          marker: {
            enabled: true
          }
        })
      }
    }
  }
}

API：https://api.highcharts.com/class-reference/Highcharts.Point#update

API：https://api.highcharts.com/highcharts/series.line.point.events.click