ChartJS堆叠柱状图Tooltip回调函数无法触发问题求助

核心问题及修复方案 #

1. 配置对象存在语法错误 #

你的options对象缺少闭合的大括号，导致Tooltip配置无法被Chart.js正确解析。需补全所有闭合符号，确保配置结构完整。

2. 数据集为空无触发条件 #

当前代码中datasets的data均为空数组，没有数据时Chart.js不会渲染任何图表元素，自然无法触发Tooltip及回调函数。必须填充有效的数据和对应标签。

3. Chart.js v3+回调参数格式变化 #

在Chart.js 3.x及以上版本中，footer回调接收的是上下文对象数组而非单个上下文对象，需调整参数处理逻辑才能正常触发。

修正后的完整代码 #

import Chart from "chart.js/auto";
import { Bar } from "react-chartjs-2";
import React from "react";

// 填充有效测试数据及标签
const data = {
  labels: ["类别A", "类别B", "类别C"],
  datasets: [
    {
      type: 'bar',
      data: [12, 19, 3],
      order: 1,
      label: "系列1",
      backgroundColor: 'rgba(255, 99, 132, 0.6)'
    },
    {
      type: 'bar',
      data: [5, 25, 10],
      order: 1,
      label: "系列2",
      backgroundColor: 'rgba(54, 162, 235, 0.6)'
    }
  ]
};

const options = {
  plugins: {
    tooltip: {
      enabled: true,
      callbacks: {
        // 接收上下文数组参数
        footer: function(contexts) {
          console.log("触发footer回调");
          // 示例：计算当前柱子的总和
          const total = contexts.reduce((sum, ctx) => sum + ctx.parsed.y, 0);
          return `总计: ${total}`;
        }
      }
    }
  },
  // 配置堆叠柱状图的轴属性
  scales: {
    y: {
      stacked: true
    },
    x: {
      stacked: true
    }
  }
};

// React组件名需首字母大写（规范要求）
class MyChart extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      data: data,
      options: options
    };
  }

  render() { 
    return (
      <div className="chart" id="chart">
        <Bar data={this.state.data} options={this.state.options}/>
      </div>
    );
  }
}

export default MyChart;

额外注意事项 #

• React类组件名必须首字母大写，否则会被识别为普通HTML标签导致渲染错误。
• 堆叠柱状图需在scales中配置x和y轴的stacked: true，才能实现堆叠效果。
• 确保导入React（类组件依赖显式导入）。

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