ChartJS tooltip位置随滚动条偏移出界问题求助

在CoreUI Angular仪表板模板中使用ChartJS绘制包含大量数据的折线图，为图表外层添加水平滚动条后，滚动功能正常，但Tooltip的位置会随滚动条偏移：未滚动时Tooltip位置正确，滚动越靠右，Tooltip越偏离对应数据点，甚至导致页面出现额外滚动条。

未滚动时Tooltip位置正确：

滚动至末尾，悬停最后几个数据点时，Tooltip偏至最右侧并产生不必要的空白：

图表HTML代码 #

<div style="width: 100%; overflow-x: auto;">
  <c-chart 
    [data]="timestampChartData"
    [options]="chartOptions.options"
    type="line" 
    height="600"
    width="3000"
 />
</div>

图表配置项 #

export const chartJsOptions: any = {
  options: {
    maintainAspectRatio: false,
    interaction: {
      intersect: false,
      mode: 'index',
    },
    plugins: {
      legend: {
        display: false
      },
    }
  },
  style: {
    backgroundColor: 'rgba(151, 187, 205, 0.2)',
    borderColor: 'rgba(151, 187, 205, 1)',
    pointBackgroundColor: 'rgba(151, 187, 205, 1)',
    pointBorderColor: '#fff',
    pointStyle: 'circle',
    pointRadius: 5,
  }
}

解决方案 #

方法1：自定义Tooltip位置修正滚动偏移 #

问题根源是ChartJS计算Tooltip位置时未考虑外层容器的滚动偏移量，可通过自定义Tooltip定位器修正：

修改图表配置项中的plugins.tooltip部分，添加自定义定位逻辑：

export const chartJsOptions: any = {
  options: {
    maintainAspectRatio: false,
    interaction: {
      intersect: true, // 改为true配合nearest定位
      mode: 'index',
    },
    plugins: {
      legend: {
        display: false
      },
      tooltip: {
        position: 'custom',
        positioners: {
          custom: (context) => {
            // 获取外层滚动容器
            const scrollContainer = context.chart.canvas.parentElement;
            // 获取滚动偏移量
            const scrollOffsetX = scrollContainer.scrollLeft;
            // 先使用默认nearest定位计算基础位置
            const basePosition = Chart.Tooltip.positioners.nearest(context);
            // 修正X轴位置，减去滚动偏移
            return {
              x: basePosition.x - scrollOffsetX,
              y: basePosition.y
            };
          }
        }
      }
    }
  },
  // 原有style配置保持不变
  style: {
    backgroundColor: 'rgba(151, 187, 205, 0.2)',
    borderColor: 'rgba(151, 187, 205, 1)',
    pointBackgroundColor: 'rgba(151, 187, 205, 1)',
    pointBorderColor: '#fff',
    pointStyle: 'circle',
    pointRadius: 5,
  }
}

方法2：调整交互模式与定位策略 #

如果不需要复杂的自定义逻辑，可尝试调整交互模式和Tooltip定位：

export const chartJsOptions: any = {
  options: {
    maintainAspectRatio: false,
    interaction: {
      intersect: true,
      mode: 'nearest', // 改为nearest模式
    },
    plugins: {
      legend: {
        display: false
      },
      tooltip: {
        position: 'nearest', // 使用最近点定位
        caretPadding: 10,
        cornerRadius: 4
      }
    }
  },
  // 原有style配置保持不变
  style: {
    backgroundColor: 'rgba(151, 187, 205, 0.2)',
    borderColor: 'rgba(151, 187, 205, 1)',
    pointBackgroundColor: 'rgba(151, 187, 205, 1)',
    pointBorderColor: '#fff',
    pointStyle: 'circle',
    pointRadius: 5,
  }
}

额外CSS优化 #

给外层滚动容器添加相对定位，确保Tooltip的定位参考正确：

.chart-scroll-container {
  width: 100%;
  overflow-x: auto;
  position: relative; /* 添加相对定位 */
}

HTML中替换类名：

<div class="chart-scroll-container">
  <c-chart 
    [data]="timestampChartData"
    [options]="chartOptions.options"
    type="line" 
    height="600"
    width="3000"
 />
</div>

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