如何更改 Dygraphs 中的鼠标事件和键盘输入

Question

如何更改 Dygraphs 中的鼠标事件和键盘输入。

我想将范围选择器或 X 轴移动更改为键盘和鼠标组合

范围选择器 [拖动] --> Shift + 拖动

X 轴移动 [ Shift + 拖动 ] --> Ctrl + 拖动

BR

Answer 1

要在 Dygraphs 中实现自定义鼠标和键盘交互以进行范围选择和 X 轴移动，您可以侦听鼠标和键盘事件，然后相应地处理它们以更改行为。

// Get a reference to your Dygraph instance
const dygraph = new Dygraph(...);

// Add event listeners to handle mouse and keyboard interactions
document.addEventListener('mousedown', handleMouseDown);
document.addEventListener('mouseup', handleMouseUp);
document.addEventListener('mousemove', handleMouseMove);
document.addEventListener('keydown', handleKeyDown);
document.addEventListener('keyup', handleKeyUp);

// Variables to track mouse and keyboard state
let isMouseDown = false;
let isShiftKeyDown = false;
let isCtrlKeyDown = false;
let startX = 0;

// Function to handle mouse down event
function handleMouseDown(event) {
  if (event.shiftKey) {
    isMouseDown = true;
    startX = event.clientX;
  }
}

// Function to handle mouse up event
function handleMouseUp(event) {
  isMouseDown = false;
}

// Function to handle mouse move event
function handleMouseMove(event) {
  if (isMouseDown && isShiftKeyDown) {
    // Handle range selection
    const endX = event.clientX;
    const selectedRange = [startX, endX];
    // Do something with the selected range
  }
}

// Function to handle key down event
function handleKeyDown(event) {
  if (event.key === 'Shift') {
    isShiftKeyDown = true;
  } else if (event.key === 'Control') {
    isCtrlKeyDown = true;
  }
}

// Function to handle key up event
function handleKeyUp(event) {
  if (event.key === 'Shift') {
    isShiftKeyDown = false;
  } else if (event.key === 'Control') {
    isCtrlKeyDown = false;
  }
}

您可以修改

handleMouseMove

函数以在按下

X-axis

键时处理

Ctrl

移动，类似于使用

Shift

键处理范围选择的方式。此外，您可以调整逻辑以满足您的特定要求。

参考：https://dygraphs.com/options.html