canvas 实现瀑布图框选获取数据

Canvas 是 HTML5 提供的一个用于绘制图形的元素，它可以通过 JavaScript 来控制。瀑布图是一种数据可视化形式，通常用于展示数据的增减变化。在实现瀑布图时，我们可能需要让用户能够通过框选（拖动鼠标选择区域）来获取特定范围内的数据。

以下是使用 Canvas 实现瀑布图并支持框选获取数据的基本步骤：

1. **创建 Canvas 元素**: 在 HTML 中添加一个 canvas 元素，并在 JavaScript 中获取这个元素的引用。

   <canvas id="waterfallChart" width="800" height="600"></canvas>

   const canvas = document.getElementById('waterfallChart');
   const ctx = canvas.getContext('2d');

2. **绘制瀑布图**: 根据数据计算每个条形的位置和高度，然后使用 `fillRect` 方法绘制每个条形。

   const data = [10, -5, 15, -10, 20]; // 示例数据
   let currentY = 300; // 初始Y坐标
   data.forEach(value => {
       const height = Math.abs(value) * 10; // 计算条形的高度
       const y = value > 0 ? currentY - height : currentY;
       ctx.fillStyle = value > 0 ? 'green' : 'red';
       ctx.fillRect(50, y, 100, height); // 绘制条形
       currentY -= height;
   });

3. **实现框选功能**: 监听鼠标事件来检测用户的拖动操作，并计算选中的区域。

   let isSelecting = false;
   let startX, startY, endX, endY;

   canvas.addEventListener('mousedown', (e) => {
       isSelecting = true;
       startX = e.offsetX;
       startY = e.offsetY;
   });

   canvas.addEventListener('mousemove', (e) => {
       if (!isSelecting) return;
       endX = e.offsetX;
       endY = e.offsetY;
       // 清除之前的选择框
       ctx.clearRect(0, 0, canvas.width, canvas.height);
       // 重新绘制瀑布图
       // ...（同上绘制瀑布图的代码）
       // 绘制选择框
       ctx.strokeStyle = 'blue';
       ctx.strokeRect(startX, startY, endX - startX, endY - startY);
   });

   canvas.addEventListener('mouseup', () => {
       isSelecting = false;
       // 根据 startX, startY, endX, endY 计算选中的数据范围
       // ...（根据坐标计算逻辑）
   });

4. **获取选中的数据**: 根据用户框选的范围，遍历数据，找出落在选中区域内的数据点。

   // 假设有函数 getDataInRange(startX, startY, endX, endY) 来计算范围内数据
   const selectedData = getDataInRange(startX, startY, endX, endY);
   console.log(selectedData);

以上是使用 Canvas 实现瀑布图并支持框选获取数据的基本思路。你可以根据实际需求调整绘图逻辑和数据处理方式。