Chart.js散点图如何无需悬停即可识别两个数据集的重叠数据点

有两种可直接落地的方案，都能实现无需悬停即可识别跨数据集重叠点位的需求： #

方案1：预处理数据集+脚本化点样式 #

先统计所有坐标对应的数据集数量，再用Chart.js原生支持的脚本化样式配置，给重叠点赋予特殊样式：

// 1. 预处理统计跨数据集重叠坐标
const datasets = [/* 你的两个散点图数据集 */];
const coordCount = {};

// 仅统计跨数据集重叠，同数据集内重复点不计入的版本
datasets.forEach(ds => {
  const dsUniqueCoords = new Set();
  ds.data.forEach(point => {
    // 浮点数坐标可加toFixed(4)避免精度误差导致统计错误
    const key = `${point.x},${point.y}`;
    if (!dsUniqueCoords.has(key)) {
      dsUniqueCoords.add(key);
      coordCount[key] = (coordCount[key] || 0) + 1;
    }
  })
})

// 2. 图表配置中自定义点样式
const chartConfig = {
  type: 'scatter',
  data: { datasets: datasets },
  options: {
    elements: {
      point: {
        // 重叠点改为红色，正常点沿用数据集默认颜色
        backgroundColor: context => {
          const key = `${context.raw.x},${context.raw.y}`;
          return coordCount[key] > 1 ? '#ff2d55' : context.dataset.pointBackgroundColor;
        },
        // 重叠点放大显示
        radius: context => {
          const key = `${context.raw.x},${context.raw.y}`;
          return coordCount[key] > 1 ? 8 : 5;
        },
        // 重叠点加黑边框
        borderColor: context => {
          const key = `${context.raw.x},${context.raw.y}`;
          return coordCount[key] > 1 ? '#000' : context.dataset.pointBorderColor;
        },
        borderWidth: context => {
          const key = `${context.raw.x},${context.raw.y}`;
          return coordCount[key] > 1 ? 2 : 1;
        }
      }
    }
  }
}

方案2：自定义全局插件复用逻辑 #

如果需要在多个图表中复用重叠点检测能力，可以自定义Chart.js插件，无需每个图表单独预处理数据：

// 注册全局重叠点检测插件
Chart.register({
  id: 'highlightOverlap',
  beforeRender: (chart) => {
    chart.coordCount = {};
    chart.data.datasets.forEach(ds => {
      const dsUniqueCoords = new Set();
      ds.data.forEach(point => {
        const key = `${point.x},${point.y}`;
        if (!dsUniqueCoords.has(key)) {
          dsUniqueCoords.add(key);
          chart.coordCount[key] = (chart.coordCount[key] || 0) + 1;
        }
      })
    })
  }
})

// 图表配置直接使用即可
const chartConfig = {
  type: 'scatter',
  data: datasets,
  options: {
    elements: {
      point: {
        backgroundColor: ctx => ctx.chart.coordCount[`${ctx.raw.x},${ctx.raw.y}`] > 1 ? '#ff2d55' : ctx.dataset.pointBackgroundColor,
        radius: ctx => ctx.chart.coordCount[`${ctx.raw.x},${ctx.raw.y}`] > 1 ? 8 : 5
      }
    }
  }
}

补充说明 #

• 如果需要区分重叠点位的数据集数量，可以根据coordCount[key]的数值匹配不同样式，比如2个数据集重叠用橙色、3个及以上用红色
• 如果坐标为浮点数，生成统计key时建议用toFixed(指定小数位)做精度归一，避免因为计算误差导致相同坐标被判定为不同

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