ChartJS折线图能否添加拖拽缩放功能？附代码片段

当然可以啦！给Chart.js的折线图添加拖拽和缩放功能，最便捷的方式是使用官方维护的chartjs-plugin-zoom插件，它能完美实现你想要的交互效果。下面是针对你的代码的具体改造步骤：

1. 引入必要的依赖脚本 #

首先，你需要在页面中引入chartjs-plugin-zoom以及它的依赖库Hammer.js（拖拽功能需要它支持触摸/鼠标拖拽）。确保脚本引入顺序正确：

<!-- 先引入Chart.js（如果你的页面还没引入的话） -->
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<!-- 引入Hammer.js（拖拽功能的依赖） -->
<script src="https://cdn.jsdelivr.net/npm/hammerjs"></script>
<!-- 引入chartjs-plugin-zoom插件 -->
<script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-zoom"></script>

2. 修改Chart配置，开启拖拽和缩放 #

在你创建Chart实例的配置中，添加plugins.zoom选项，开启并配置拖拽（pan）和缩放（zoom）功能：

<canvas class="square_margin_less" id="myChart" width="100" height="30"></canvas>

<script>
new Chart(document.getElementById("myChart").getContext('2d'), {
  type: 'line',
  data: {
    labels: {{ data.labels|safe }},
    datasets: [{
      label: 'x',
      data: {{ data.x }},
      borderColor: 'rgba(233,105,118,1)',
      fill: false // 按需设置是否填充区域
    }, {
      label: 'y',
      data: {{ data.y }},
      borderColor: 'rgba(96, 125, 139, 1)', // 补全你原有的颜色值
      fill: false
    }]
  },
  options: {
    // 开启拖拽和缩放插件
    plugins: {
      zoom: {
        pan: {
          enabled: true, // 开启拖拽平移功能
          mode: 'xy' // 允许x、y轴双向拖拽，也可单独设为'x'或'y'
        },
        zoom: {
          enabled: true, // 开启缩放功能
          mode: 'xy', // 允许x、y轴双向缩放
          wheel: {
            enabled: true // 允许鼠标滚轮触发缩放
          },
          pinch: {
            enabled: true // 允许触摸设备的 pinch 手势缩放
          }
        }
      }
    },
    // 可选：开启响应式适配，让图表更好地适配容器
    responsive: true,
    maintainAspectRatio: false
  }
});
</script>

3. 自定义配置（按需调整） #

如果你只需要针对x轴进行拖拽和缩放，把mode值改成'x'即可；另外你还可以设置缩放的范围限制，比如在scales中指定轴的最小/最大值：

scales: {
  x: {
    min: 0, // x轴最小显示值
    max: 20, // x轴最大显示值
    // 其他x轴配置...
  }
}

插件还有更多进阶配置，比如拖拽速度、缩放灵敏度、快捷键触发缩放等，你可以根据自己的需求进一步调整。

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