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

问题描述 投票:0回答:1

我有以下两个图表:

enter image description here

折线图的配置如下:

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功能,以便直到我取消选择所选点后,饼图才会更新。

有什么建议吗?

javascript charts highcharts frontend
1个回答
0
投票

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

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

          // do something
        }
      }
    }
  }
}]

实时演示: http://jsfiddle.net/BlackLabel/6m4e8x0y/4886/

© www.soinside.com 2019 - 2024. All rights reserved.