Question

我有以下图表：

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

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

但我希望在用户点击蓝色系列时显示警告，例如＆＃34; Hello World＆＃34;但是由于绿色的一个停留在一起并且没有允许点击事件触发。

任何人都知道是否有任何属性允许我点击蓝色系列甚至在绿色区域图表下？

谢谢你们。

Answer 1

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

系列中＆＃39;点击我检查事件是否发生在由两点创建的线下面。为此，我使用斜率截距形式（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

如何在HighCharts中的另一个系列区域图表下方的系列区域图表中单击？

1 个答案: