如何移除react-chartjs-2散点图中默认显示的多余坐标？

你的问题出在category类型y轴与散点数据的匹配逻辑上，结合配置调整即可移除多余坐标：

关键问题分析 #

你将散点数据的y值设为0，但y轴是category类型，它会把数字0当作额外的刻度值，同时你定义的labels数组又会生成另一组刻度，导致出现重复/多余的坐标元素。

解决方案 #

根据你的需求（y轴为标签、x轴为数值），分两种场景调整：

场景1：每个标签对应一个散点（常规需求） #

修改数据的y值为对应标签字符串，同时优化y轴配置确保只显示自定义标签：

<Scatter
  options={{
    animation: false,
    scales: {
      x: {
        type: 'linear',
        position: 'bottom',
        title: {
          display: true,
          text: 'Association'
        },
        // 可选：隐藏x轴网格线，减少视觉干扰
        grid: {
          display: false
        }
      },
      y: {
        type: 'category',
        title: {
          display: true,
          text: 'Attributes (by importance)'
        },
        ticks: {
          autoSkip: false, // 强制显示所有自定义标签
          maxRotation: 0, // 标签不旋转
          minRotation: 0
        },
        // 可选：隐藏y轴网格线
        grid: {
          display: false
        }
      }
    },
    plugins: {
      legend: {
        display: false
      }
    }
  }}
  data={{
    labels: ['Label 1', 'Label 2', 'Label 3', 'Label 4', 'Label 5'],
    datasets: [
      {
        label: 'Scatter Data',
        data: [
          { x: 10, y: 'Label 1' },
          { x: 15, y: 'Label 2' },
          { x: 30, y: 'Label 3' },
          { x: 45, y: 'Label 4' },
          { x: 60, y: 'Label 5' }
        ],
        backgroundColor: 'rgba(75, 192, 192, 0.6)',
        pointRadius: 10
        // 若不需要显示点，保留pointStyle: 'hidden'即可
      }
    ]
  }}
/>

场景2：所有散点集中在同一个y轴标签上 #

如果你的需求是所有点都对应同一个标签（比如都在Label 1），需要限制y轴的刻度范围并过滤多余标签：

<Scatter
  options={{
    animation: false,
    scales: {
      x: {
        type: 'linear',
        position: 'bottom',
        title: {
          display: true,
          text: 'Association'
        }
      },
      y: {
        type: 'category',
        title: {
          display: true,
          text: 'Attributes (by importance)'
        },
        ticks: {
          // 只显示指定标签，其他刻度返回null隐藏
          callback: function(value) {
            return value === 'Label 1' ? value : null;
          }
        },
        // 限制y轴范围，只显示目标标签
        min: 'Label 1',
        max: 'Label 1'
      }
    },
    plugins: {
      legend: {
        display: false
      }
    }
  }}
  data={{
    labels: ['Label 1'],
    datasets: [
      {
        label: 'Scatter Data',
        data: [
          { x: 10, y: 'Label 1' },
          { x: 15, y: 'Label 1' },
          { x: 30, y: 'Label 1' },
          { x: 45, y: 'Label 1' },
          { x: 60, y: 'Label 1' }
        ],
        backgroundColor: 'rgba(75, 192, 192, 0.6)',
        pointRadius: 10,
        pointStyle: 'hidden'
      }
    ]
  }}
/>

核心修改点总结 #

• 散点数据的y值必须与category轴的labels字符串匹配，不能用数字索引
• 通过ticks.callback或min/max限制y轴显示的刻度，过滤多余元素
• 可选隐藏网格线，进一步清理图表视觉效果

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