如何在 HighCharts 中单击另一个系列面积图下方的系列面积图？答案

【问题标题】：How to click in a serie area chart below another serie area chart in HighCharts?如何在 HighCharts 中单击另一个系列面积图下方的系列面积图？
【发布时间】：2018-01-03 11:39:39
【问题描述】：

我有以下图表：

https://i.stack.imgur.com/01ulJ.png

你怎么看，我有两张面积图，一张绿色的，一张蓝色的。绿色的比蓝色的大，所以比蓝色的大。

但我想在用户点击蓝色系列时显示一个警报，例如“Hello World”，但它保持不可能，因为绿色系列停留并且不允许点击事件触发。

任何人都知道是否有任何属性可以让我在绿色区域图下方点击蓝色系列？

谢谢各位。

【问题讨论】：

为蓝色的做一个辅助 yAxis
感谢@YounesZaidi 的帮助，但这对我没有用。我特别需要保持在同一个 yAxis 上。
您不想简单地更改系列订单？
@Core972 不幸的是没有。我想让它无论用户选择什么顺序，即使在另一个系列下，标记也总是可以点击的。

标签： javascript jquery charts highcharts

【解决方案1】：

请参阅此现场演示：https://jsfiddle.net/kkulig/6uq2gj8c/

在系列中单击我检查事件是否发生在由两点创建的线下方。为此，我使用 slope–intercept form (y = a*x + b)。必须启用trackByArea 才能正确触发事件。

  plotOptions: {
    area: {
      trackByArea: true,
      events: {
        click: function(e) {
          var chart = this.chart;
          s1 = chart.series[0],
            p1 = s1.points[0],
            p2 = s1.points[1],
            x1 = p1.plotX + chart.plotLeft,
            y1 = p1.plotY + chart.plotTop,
            x2 = p2.plotX + chart.plotLeft,
            y2 = p2.plotY + chart.plotTop,
            eX = e.chartX, eY = e.chartY,
            // line equation: y = a*x + b
            a = (y1 - y2) / (x1 - x2),
            b = y1 - a * x1,
            val = (a * eX + b);

          if (eX >= x1 && eX <= x2 && val < eY) {
            console.log('Clicked event over Series1!');
          }
        }
      }
    }
  },

为了使这个示例完全发挥作用，需要对所有线段执行这些操作（很容易实现）。

API 参考： https://api.highcharts.com/highcharts/plotOptions.area.trackByArea

【讨论】：