React中使用Chart.js拖拽选区域后如何禁止自动缩放？

方案一：配置chartjs-plugin-zoom禁用缩放，仅保留选区功能 #

chartjs-plugin-zoom的拖拽默认绑定缩放行为，你可以通过修改配置关闭缩放，只保留拖拽选区的事件监听来获取起止点坐标。

具体配置 #

1. 在zoom插件配置中禁用缩放，同时监听拖拽完成事件：

const chartOptions = {
  plugins: {
    zoom: {
      // 完全禁用缩放功能
      zoom: {
        enabled: false,
      },
      // 禁止平移（不需要的话）
      pan: {
        enabled: false,
      },
      // 拖拽结束后获取选区坐标
      onZoomComplete: ({ chart, xAxis }) => {
        const startX = xAxis.min;
        const endX = xAxis.max;
        // 调用自定义方法添加标注
        addRegionAnnotation(chart, startX, endX);
      }
    },
    annotation: {
      annotations: {}
    }
  }
};

2. 实现标注添加函数：

function addRegionAnnotation(chart, startX, endX) {
  chart.options.plugins.annotation.annotations.selectionRegion = {
    type: 'box',
    xMin: startX,
    xMax: endX,
    yMin: 0,
    yMax: chart.scales.y.max,
    backgroundColor: 'rgba(255, 99, 132, 0.2)',
    borderColor: 'rgb(255, 99, 132)',
    borderWidth: 1
  };
  chart.update();
}

方案二：不依赖zoom插件，手动实现选区功能 #

如果zoom插件的默认逻辑不好适配，可以直接在canvas上监听鼠标事件，手动实现选区并获取坐标。

实现代码（React组件） #

import { useEffect, useRef } from 'react';
import Chart from 'chart.js/auto';
import annotationPlugin from 'chartjs-plugin-annotation';

Chart.register(annotationPlugin);

function SelectionChart() {
  const chartRef = useRef(null);
  const canvasRef = useRef(null);
  const isDragging = useRef(false);
  const startValue = useRef(null);

  useEffect(() => {
    if (!chartRef.current) {
      const ctx = canvasRef.current.getContext('2d');
      chartRef.current = new Chart(ctx, {
        type: 'line',
        data: { /* 你的图表数据 */ },
        options: {
          plugins: { annotation: { annotations: {} } }
        }
      });
    }

    const chart = chartRef.current;
    const canvas = canvasRef.current;

    const handleMouseDown = (e) => {
      isDragging.current = true;
      const point = chart.getElementsAtEventForMode(e, 'nearest', { intersect: false }, true)[0];
      if (point) {
        startValue.current = chart.scales.x.getValueForPixel(point.x);
      }
    };

    const handleMouseUp = (e) => {
      if (!isDragging.current || !startValue.current) return;
      isDragging.current = false;
      
      const endPoint = chart.getElementsAtEventForMode(e, 'nearest', { intersect: false }, true)[0];
      if (endPoint) {
        const endVal = chart.scales.x.getValueForPixel(endPoint.x);
        const startX = Math.min(startValue.current, endVal);
        const endX = Math.max(startValue.current, endVal);
        addRegionAnnotation(chart, startX, endX);
      }
    };

    canvas.addEventListener('mousedown', handleMouseDown);
    canvas.addEventListener('mouseup', handleMouseUp);

    return () => {
      canvas.removeEventListener('mousedown', handleMouseDown);
      canvas.removeEventListener('mouseup', handleMouseUp);
      chartRef.current.destroy();
    };
  }, []);

  const addRegionAnnotation = (chart, startX, endX) => {
    chart.options.plugins.annotation.annotations.selection = {
      type: 'box',
      xMin: startX,
      xMax: endX,
      yMin: 0,
      yMax: chart.scales.y.max,
      backgroundColor: 'rgba(75, 192, 192, 0.2)',
      borderColor: 'rgb(75, 192, 192)',
      borderWidth: 1
    };
    chart.update();
  };

  return <canvas ref={canvasRef} />;
}

export default SelectionChart;

关键注意事项 #

• 方案一中，必须确保zoom.enabled设为false，避免拖拽触发缩放。
• 手动实现选区时，通过chart.scales.x.getValueForPixel()将鼠标像素坐标转换为图表刻度值，保证标注位置准确。
• 添加标注后调用chart.update()刷新图表，让标注生效。

内容的提问来源于stack exchange，提问作者Tigran Vardanyan