如何用JavaScript禁用/启用Plotly.js图表的所有鼠标交互？

你需要用JavaScript实现禁用或启用Plotly.js图表上的所有鼠标交互（包括点击、拖拽选择/缩放等），但当前的代码无法达成需求——点击按钮后图表仍可正常交互。

你的原代码如下：

JavaScript 代码 #

Plotly.newPlot('myDiv', [{x: [1, 2, 3, 4], y: [10, 15, 13, 17], mode: 'markers'}], {margin: {l: 50, r: 50, b: 50, t: 50, pad: 4}});

document.getElementById("button").onclick = () => {
    document.getElementById("container").onclick = (e) => {
        e.stopPropagation();
        e.preventDefault();
        return false;
    };
};

CSS 代码 #

#button { background: gray; }

HTML 代码 #

<script src="https://cdn.plot.ly/plotly-2.16.2.min.js"></script>
<div id="button">Click here to disable/enable interaction on plot</div>
<div id="container"><div id="myDiv"></div></div>

原代码问题分析 #

你试图通过阻止容器的点击事件来禁用交互，但Plotly的交互逻辑是直接绑定在图表内部的SVG元素上的，这种方式无法阻断Plotly自身的事件监听，因此无效。

正确解决方案 #

Plotly提供了原生的配置项来控制交互，核心是使用config参数中的staticPlot属性，这是最彻底的禁用所有交互的方式；也可以动态切换该属性实现禁用/启用的切换。

方法1：初始化时直接设置静态图表（完全禁用交互） #

如果一开始就不需要交互，初始化图表时直接添加staticPlot: true配置：

Plotly.newPlot('myDiv', 
  [{x: [1, 2, 3, 4], y: [10, 15, 13, 17], mode: 'markers'}], 
  {margin: {l: 50, r: 50, b: 50, t: 50, pad: 4}},
  {staticPlot: true} // 开启静态模式，禁用所有鼠标交互
);

方法2：动态切换禁用/启用交互（按钮控制） #

通过维护一个状态变量，点击按钮时切换staticPlot的状态，并用Plotly.react更新图表配置：

完整可运行代码：

<script src="https://cdn.plot.ly/plotly-2.16.2.min.js"></script>
<div id="button" style="background: gray; padding: 8px; cursor: pointer;">点击禁用图表交互</div>
<div id="myDiv"></div>

<script>
// 初始化状态：允许交互
let isInteractive = true;
// 图表数据、布局
const trace = [{x: [1, 2, 3, 4], y: [10, 15, 13, 17], mode: 'markers'}];
const layout = {margin: {l: 50, r: 50, b: 50, t: 50, pad: 4}};

// 初始化图表，默认开启交互
Plotly.newPlot('myDiv', trace, layout, {staticPlot: false});

// 按钮点击切换交互状态
document.getElementById("button").onclick = () => {
  isInteractive = !isInteractive;
  // 更新配置并重新渲染图表
  Plotly.react('myDiv', trace, layout, {staticPlot: !isInteractive});
  // 更新按钮文字
  document.getElementById("button").textContent = isInteractive 
    ? "点击禁用图表交互" 
    : "点击启用图表交互";
};
</script>

精细控制单个交互（可选） #

如果不需要完全禁用所有交互，只想关闭某一类行为，可以单独配置config中的对应属性，比如：

{
  scrollZoom: false,    // 禁用滚轮缩放
  dragMode: false,      // 禁用拖拽选择/缩放
  hoverMode: false,     // 禁用鼠标悬停提示框
  showTips: false,      // 禁用默认操作提示
  displayModeBar: false // 隐藏顶部操作栏
}

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