javascript - HighCharts - 选择点时禁用鼠标悬停

Question

我有以下两个图表：

折线图配置如下：

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(event) {
              const point = this;
              console.log(point.selected);
              const selected = (point.selected === true) ? false : true;
              point.series.points.forEach(p => {
                p.update({
                  marker: {
                    enabled: false
                  }
                }, false);
              });
              if (selected === false) {
                point.update({
                  marker: {
                    enabled: false
                  }
                });
              } else {
                point.update({
                marker: {
                  enabled: true
                }
              });
              }
            },
            mouseOver: function(event)  {
              this.filterOptimizationResults(event.target.x, event.target.y);
            }.bind(this)
          }
        }
      }
      ]
    };

当悬停在任何点上时，它会触发更新右侧饼图的功能。

在折线图上，我也可以单击一个点来关注它。

我想要做的是，当我单击折线图上的任何点时，禁用 MouseOver 功能，因此在我取消选择所选点之前，饼图不会更新。

有什么建议么？

标签： javascriptchartshighchartsfrontend

Answer 1

您可以有条件地在mouseOver函数中运行一些代码，例如：

series: [{
  ...,
  point: {
    events: {
      mouseOver: function(){
        if (!this.series.points.filter((p) => p.selected).length) {

          // do something
        }
      }
    }
  }
}]

---

现场演示：http: //jsfiddle.net/BlackLabel/6m4e8x0y/4886/