react-chart-js-2中无法修改tooltip标题问题求助

你的核心问题是Tooltip回调赋值的是字符串而非函数，Chart.js的tooltip callbacks要求必须是函数类型，字符串会被直接忽略。以下是具体修复方案：

1. 修复回调函数类型 #

把options.plugins.tooltip.callbacks里的字符串替换成函数，比如自定义标签内容：

const options = {
  plugins: {
    tooltip: {
      callbacks: {
        // 自定义标签内容，示例：显示标签名+格式化数值
        label: function(context) {
          const label = context.label || '';
          const value = context.parsed.x || 0;
          return `${label}: ${value.toFixed(3)}`;
        },
        // 自定义标题（按需启用）
        beforeTitle: function(context) {
          return `数据详情`;
        }
      },
    },
    legend: {
      display: false,
    },
  },
};

2. 补充OTHERS项的背景色 #

你当前的bgColor数组没有包含新增的OTHERS项，会导致该条柱子无背景色，需要补充：

// 在label.push('OTHERS')之后添加：
const lastValue = value[value.length - 1];
bgColor.push(lastValue > 0 ? 'rgba(255, 107, 107)' : 'rgba(151, 208, 173)');

完整修改后的组件代码 #

/* eslint-disable max-statements */
import {HorizontalBar} from 'react-chartjs-2';
import ChartWrapper from '../../Dashboards/ChartWrapper/ChartWrapper';

const HorizontalLogChart = ({spamDetails}) => {
  const result = Object.entries(spamDetails).map(([key, value]) => ({label: key, values: parseFloat(value, 10)})).filter((item) => item.values > 0.1 || item.values < -0.1);
  const value = result.map((item) => item.values);
  const label = result.map((item) => item.label);
  const bgColor = value.map((item) => (item > 0 ? 'rgba(255, 107, 107)' : 'rgba(151, 208, 173)'));

  const unmatchedResult = Object.entries(spamDetails).map(([key, number]) => ({label: key, values: parseFloat(number, 10)})).filter((item) => item.values < 0.1 && item.values > -0.1);
  const unmatchedValueArray = unmatchedResult.map((item) => item.values).reduce((acc, currentValue) => acc + currentValue).toFixed(3);

  if (parseFloat(unmatchedValueArray, 10) > 0.5) {
    value.push(parseFloat(unmatchedValueArray, 10));
  } else if (parseFloat(unmatchedValueArray, 10) < -0.5) {
    value.push(parseFloat(unmatchedValueArray, 10));
  } else if (parseFloat(unmatchedValueArray, 10) > 0 && parseFloat(unmatchedValueArray, 10) < 0.5) {
    value.push(0.5);
  } else if (parseFloat(unmatchedValueArray, 10) < 0 && parseFloat(unmatchedValueArray, 10) > -0.5) {
    value.push(-0.5);
  }

  label.push('OTHERS');
  // 补充OTHERS项的背景色
  const lastValue = value[value.length - 1];
  bgColor.push(lastValue > 0 ? 'rgba(255, 107, 107)' : 'rgba(151, 208, 173)');

  const data = {
    labels: label,
    datasets: [
      {
        data: value,
        label: 'Notes',
        backgroundColor: bgColor,
        borderWidth: 1,
      },
    ],
  };

  const options = {
    plugins: {
      tooltip: {
        callbacks: {
          // 自定义tooltip标签内容
          label: (context) => {
            const itemLabel = context.label;
            const itemValue = context.parsed.x;
            return `${itemLabel}: ${itemValue.toFixed(3)}`;
          },
          // 自定义tooltip标题（可选）
          beforeTitle: () => '垃圾邮件数据分析',
        },
      },
      legend: {
        display: false,
      },
    },
  };


  return (
    <ChartWrapper data={data}>
      <HorizontalBar options={options} />
    </ChartWrapper>
  );
};

export default HorizontalLogChart;

额外说明 #

• 回调函数的context参数包含当前tooltip的所有上下文数据，可通过context.parsed获取解析后的数值，context.label获取标签名，按需自定义内容。
• 如果需要更复杂的tooltip结构，可使用tooltip.custom回调完全自定义DOM结构。

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