矩形選區columnrange

我想使矩形選區在Highcharts columnrange圖表像這樣的：矩形選區columnrange

要做到這一點，我想獲得選定區域的coordiantes以及準確與每個列範圍對應的糾錯符號的座標。然後，我會簡單地檢查選擇是否與某些列的範圍重疊並將其選中。

我知道如何獲得選擇區域的座標以及如何獲得每個列的低和高值。要確定哪些列區域正在選擇中，我還需要找到每個列區域的座標，我不知道該如何操作。如果我看一下列的範圍的x屬性，我只能看到該組的索引（例如0或1），它只告訴我當前列範圍所在的組（例如Jan，Feb，...）。

如何獲得columranges矩形的確切x座標（類似於2.75至2.95的最後一個藍色列），以確定哪些位於選定區域下方？

這裏的fiddlle：https://jsfiddle.net/nikicc/0mhhma2d/

來源

2017-05-03 nikicc

不清楚_（有點像從2.75到2.95，去年藍柱）_什麼是2.75到2.95，你是如何得到它 –

我的意思是2.75至2.95自從去年藍columnrange是繪製在x座標3左右（因爲它是第4組），但是繪製在Apr部分中心的左邊。我正在嘗試將列寬度投影到數據的座標系中，但@morganfree在像素的座標系中工作的位置提供了一個解決方案。 – nikicc

柱的形狀存儲在point.shapeArgs但這些值是在像素 - 所以你需要把它們翻譯成軸值或選擇事件COORDS轉換爲像素。然後你可以檢查列是否在選擇矩形內。

 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/

來源

2017-05-04 12:08:03 morganfree

正是我在找的！ Tnx :) – nikicc

矩形選區columnrange

回答

相關問題