React结合Chart.js 2实现分类Y轴图表，Tooltip显示undefined问题求助

嘿，我来帮你搞定这个Tooltip显示undefined的问题！咱们先理清楚问题出在哪，再一步步调整配置：

问题根源分析 #

你遇到的问题主要有两个核心点：

1. 多Y轴关联混乱：你配置了分类轴和线性轴两个Y轴，但没有明确指定数据集对应哪个轴，Chart.js无法正确识别数据对应的标签。
2. Tooltip默认逻辑不匹配分类轴：分类轴的data实际上是标签数组的索引值，而Tooltip默认会直接显示这个索引，不会自动映射到分类标签；另外你在dataset里加了多余的labels属性，Chart.js并不支持这个字段，反而会造成配置混淆。

具体解决方案 #

下面是修改后的完整配置，我会标注关键调整点：

1. 修正数据集（datasets）配置

移除多余的labels属性，添加yAxisID明确关联分类Y轴：

datasets: [
  {
    label: title,
    fill: false,
    lineTension: 0.1,
    borderColor: colorArray()[counter],
    borderCapStyle: 'butt',
    borderJoinStyle: 'miter',
    pointBorderColor: 'rgba(75,192,192,1)',
    pointBackgroundColor: '#fff',
    pointBorderWidth: 1,
    pointHoverRadius: 6,
    pointHoverBackgroundColor: 'rgba(75,192,192,1)',
    pointHoverBorderColor: 'rgba(220,220,220,1)',
    pointHoverBorderWidth: 3,
    pointRadius: 1,
    pointHitRadius: 1,
    showLine: true,
    steppedLine: true,
    spanGaps: true,
    data: data, // 这里的data必须是eventLabelArray的索引数组，比如[0,1,0,2]这样的数值
    yAxisID: 'y-category', // 关键：指定使用分类Y轴
    year: dataYear,
    measurement: 'state'
  }
]

注意：data数组里的元素必须是eventLabelArray的索引（比如eventLabelArray = ["事件A", "事件B"]，那么data应该是[0,1,0]这类数值），不能直接放标签文本。

2. 修正Options配置（含Tooltip自定义回调）

给每个Y轴添加唯一ID，同时自定义Tooltip的标签回调，将索引映射为分类标签：

const options = {
  legend: { display: true },
  scales: {
    xAxes: [
      {
        scaleLabel: { display: true, labelString: 'Weeks' },
        ticks: { autoSkip: true, autoSkipPadding: 20 }
      }
    ],
    yAxes: [
      { 
        type: 'category', 
        id: 'y-category', // 给分类轴加唯一ID
        labels: this.state.eventLabelArray,
        scaleLabel: { display: true, labelString: '事件分类' }
      },
      { 
        type: 'linear', 
        id: 'y-linear', // 给线性轴加唯一ID
        position: 'right', // 可选：把线性轴放到右侧避免重叠
        labels: this.state.brixLabelArray,
        scaleLabel: { display: true, labelString: 'Brix值' }
      }
    ]
  },
  tooltips: {
    callbacks: {
      label: function(tooltipItem, data) {
        const dataset = data.datasets[tooltipItem.datasetIndex];
        const yAxisID = dataset.yAxisID;
        // 根据ID找到对应的Y轴配置
        const yAxis = data.options.scales.yAxes.find(axis => axis.id === yAxisID);
        
        if (yAxis && yAxis.type === 'category') {
          // 把索引映射为分类标签，防止索引越界显示undefined
          const categoryLabel = yAxis.labels[tooltipItem.yLabel] || '未知分类';
          return `${dataset.label}: ${categoryLabel}`;
        }
        // 线性轴直接显示原始数值
        return `${dataset.label}: ${tooltipItem.yLabel}`;
      }
    }
  }
};

为什么这样修改能解决问题？ #

• 明确轴关联：通过yAxisID让数据集和对应的Y轴绑定，Chart.js不会再混淆两个Y轴的配置；
• 自定义Tooltip逻辑：手动将数据中的索引值映射到分类轴的标签数组，让Tooltip显示真实的分类名称而非索引；
• 清理无效配置：移除dataset中多余的labels属性，避免Chart.js解析配置时出错。

按照这个配置调整后，你的Tooltip应该就能正确显示分类标签啦！

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