javascript - 如何使用 Highcharts Js 突出显示特定点

我有一个简单的 Highchart,其中包含多达 1000 个数据的数据集。只有 y values x values 是自动生成的。另外, values 来自我的 nodejs 服务器,所以请不要对这个符号感到惊讶。现在我想要 3 个特殊的 values ,它们的 x 和 y values 已知被突出显示。以哪种方式暂时不重要。一种可能性是显示该位置的点,否则不显示它们。我的问题是我不知道如何控制特定点。

var chart1 = new Highcharts.Chart({
        chart: {
            renderTo: 'chart-emg1',
            type: 'line'
        },
        title: {
            text: 'EMG 1'
        },
        xAxis: {
            tickInterval: 1

        },
        yAxis: {
            title: { text: 'Voltage'}
        },
        series: [{
            data: [<%-data1 %>]
        }]
    });

回答1

您可以使用 load 事件并更新特定点。例如:

events: {
  load: function() {
    this.series[0].points.forEach(point => {
      const isPointToHighlight = pointsToHighlight.some(
        p => p.x === point.x && p.y === point.y
      );
      if (isPointToHighlight) {
        point.update({
          color: 'red',
          marker: {
            enabled: true
          }
        }, false);
      }
    });

    this.redraw();
  }
}

现场演示:http://jsfiddle.net/BlackLabel/tLd3j78f/

API参考:

https://api.highcharts.com/highcharts/chart.events.load

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