javascript - Highcharts 列范围中的矩形选择

Question

我想在 Highcharts 列范围图表中启用矩形选择，如下所示:

为此，我想获取所选区域的坐标以及与每个列范围对应的矩形的精确坐标。然后我只需检查选择是否与某些列范围重叠并将其标记为选中。

我知道如何获取选择区域的坐标以及如何获取每个列范围的低值和高值。为了确定哪些列范围处于选择状态，我还需要找到每个列范围的 x 坐标，但我不知道该怎么做。如果我查看列范围的 x 属性，我只会看到该组的索引(例如 0 或 1)，它只会告诉我当前在哪个组内(例如 Jan、Feb...)列范围所在。

如何获取列范围矩形的精确 x 坐标(例如最后一个蓝色列的 2.75 到 2.95)，以便找出哪些区域位于所选区域下？

这是 fiddle :https://jsfiddle.net/nikicc/0mhhma2d/

Answer 1

列的形状存储在 point.shapeArgs 中，但这些值以像素为单位 - 因此您需要将它们转换为轴值或将选择事件坐标转换为像素。然后您可以检查该列是否在选择矩形内。

        var xAxis = e.xAxis[0],
      yAxis = e.yAxis[0];

    var xLeft = xAxis.axis.toPixels(xAxis.min, true),
      xRight = xAxis.axis.toPixels(xAxis.max, true),
      yBottom = yAxis.axis.toPixels(yAxis.min, true),
      yTop = yAxis.axis.toPixels(yAxis.max, true);

    this.series.forEach((series, j) => {
      series.data.forEach((point, i) => {
        var shapeArgs = point.shapeArgs;
        var inside = (
          shapeArgs.x > xLeft &&
          shapeArgs.x + shapeArgs.width < xRight &&
          shapeArgs.y > yTop &&
          shapeArgs.y + shapeArgs.height < yBottom
        );

        point.select(inside, true)
      });
    });

示例:https://jsfiddle.net/f400L2p2/