Highcharts columnrange 中的矩形选择

Question

我想在 Highcharts columnrange 图表中启用矩形选择，如下所示：

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

我知道如何获取选择区域的坐标以及如何获取每个列范围的低值和高值。要确定正在选择哪些列范围，我还需要找到每个列范围的 x 坐标，我不知道该怎么做。如果我查看 columnrange 的 x 属性，我只会看到组的索引（例如 0 或 1），它只会告诉我当前列范围位于哪个组（例如 Jan、Feb 等）中.

如何获得列范围矩形的确切 x 坐标（对于最后一个蓝色列，大约是从 2.75 到 2.95），以便找出哪些在选定区域下？

这是小提琴：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/

Highcharts columnrange 中的矩形选择

Rectangular selection in Highcharts columnrange

javascript

selection

highcharts