Chart.js+Bootstrap4：鼠标悬停时图表区间切换异常求助

这问题我之前帮同事排查过类似的，大概率是图表实例管理不当或者事件/异步请求冲突导致的，咱们一步步来解决：

最常见原因：旧图表实例未销毁，多个实例叠加 #

每次点击切换按钮时，如果直接创建新的Chart实例，旧的实例并不会自动消失——它还在DOM背后运行，鼠标悬停时多个实例同时触发hover事件，就会出现区间乱跳的情况。

解决方案：全局维护图表实例，更新前销毁旧实例 #

// 全局声明图表实例变量，初始为null
let chartInstance = null;

// 封装更新图表的函数
function renderChart(newChartData) {
  const chartCtx = document.getElementById('your-chart-id').getContext('2d');
  
  // 如果已有实例，先销毁再重建
  if (chartInstance) {
    chartInstance.destroy();
  }

  // 创建新的图表实例
  chartInstance = new Chart(chartCtx, {
    type: 'line', // 你的图表类型
    data: newChartData,
    options: {
      // 你的图表配置（tooltip、hover等）
    }
  });
}

// 按钮点击事件里调用renderChart
$('.chart-switch-btn').click(function() {
  const targetFreq = this.id;
  // 根据targetFreq发起Ajax请求
  $.ajax({
    url: `/api/get-data?freq=${targetFreq}`,
    success: function(res) {
      renderChart(res.data);
    }
  });
});

次要可能：事件重复绑定或异步请求顺序混乱 #

1. 按钮事件被重复绑定 #

如果你的代码里不小心多次执行了按钮点击绑定（比如把绑定逻辑放在了某个会重复执行的函数里），一次点击会触发多次Ajax请求，图表被多次更新，悬停时自然会冲突。

解决办法：确保事件只绑定一次，或者绑定前先解绑：

// 先解绑再绑定，避免重复
$('.chart-switch-btn').off('click').on('click', function() {
  // 你的逻辑
});

2. 异步请求返回顺序混乱 #

快速点击不同按钮时，先发起的请求可能后返回，导致旧数据覆盖新数据，图表状态异常。

解决办法：添加请求取消机制，终止未完成的旧请求：

let currentAjaxXhr = null;

$('.chart-switch-btn').click(function() {
  const targetFreq = this.id;
  
  // 如果有未完成的请求，先取消
  if (currentAjaxXhr) {
    currentAjaxXhr.abort();
  }

  // 发起新请求，保存XHR对象
  currentAjaxXhr = $.ajax({
    url: `/api/get-data?freq=${targetFreq}`,
    success: function(res) {
      renderChart(res.data);
      currentAjaxXhr = null; // 请求完成后重置
    },
    error: function(xhr) {
      if (xhr.statusText !== 'abort') {
        console.error('请求失败:', xhr);
      }
      currentAjaxXhr = null;
    }
  });
});

进阶优化：复用实例而非销毁重建 #

如果只是更新图表数据，不需要每次都销毁实例，可以直接更新数据后调用update()方法，性能更好：

function updateChartData(newData) {
  if (chartInstance) {
    // 替换数据
    chartInstance.data = newData;
    // 如果需要更新配置也可以在这里修改
    // chartInstance.options.tooltip = { ... };
    // 触发图表更新
    chartInstance.update();
  }
}

先从销毁旧实例的方案开始排查，这是最容易触发这个问题的点，一般解决后悬停乱跳的情况就会消失。

内容的提问来源于stack exchange，提问作者J.G.Sable