在NextJS中为react-chartjs-2柱状图添加水平参考线

步骤1：安装注释插件 #

首先安装ChartJS官方的注释插件，用来绘制参考线：

npm install chartjs-plugin-annotation
# 或用yarn
yarn add chartjs-plugin-annotation

步骤2：注册插件 #

在组件文件中把插件注册到ChartJS实例：

import { Chart as ChartJS } from "chart.js/auto"
import { Bar } from "react-chartjs-2"
import annotationPlugin from 'chartjs-plugin-annotation'

// 注册插件
ChartJS.register(annotationPlugin)

步骤3：计算年度总计平均值 #

从你的数据中提取数值，计算平均值：

// 假设data.datasets[0].data是各数据项的数值数组
const calculateAverage = (chartData) => {
  const values = chartData.datasets[0].data
  return values.reduce((sum, val) => sum + val, 0) / values.length
}

// 在组件内计算平均值
const average = calculateAverage(data)

步骤4：配置options添加参考线 #

修改你的options，添加annotation配置项定义水平参考线：

const options = {
  // 保留你的原有配置（比如responsive、scales等）
  responsive: true,
  scales: {
    y: {
      beginAtZero: true
    }
  },
  annotation: {
    annotations: {
      averageLine: {
        type: 'line',
        yMin: average,
        yMax: average,
        borderColor: '#e74c3c', // 参考线颜色
        borderWidth: 2, // 线宽
        borderDash: [6, 4], // 虚线样式（可选）
        label: {
          content: `年度平均值: ${average.toFixed(2)}`, // 显示平均值文本
          enabled: true,
          backgroundColor: 'rgba(0,0,0,0.7)',
          color: '#fff',
          padding: 5,
          position: 'end'
        }
      }
    }
  }
}

完整组件代码片段 #

整合所有部分到你的组件中：

import { Chart as ChartJS } from "chart.js/auto"
import { Bar } from "react-chartjs-2"
import annotationPlugin from 'chartjs-plugin-annotation'
import { useRef } from 'react'

ChartJS.register(annotationPlugin)

const BarChart = ({ data }) => {
  const ref = useRef(null)
  
  // 计算平均值
  const calculateAverage = (chartData) => {
    const values = chartData.datasets[0].data
    return values.reduce((sum, val) => sum + val, 0) / values.length
  }
  const average = calculateAverage(data)

  const options = {
    responsive: true,
    scales: {
      y: {
        beginAtZero: true
      }
    },
    annotation: {
      annotations: {
        averageLine: {
          type: 'line',
          yMin: average,
          yMax: average,
          borderColor: '#e74c3c',
          borderWidth: 2,
          borderDash: [6, 4],
          label: {
            content: `年度平均值: ${average.toFixed(2)}`,
            enabled: true,
            backgroundColor: 'rgba(0,0,0,0.7)',
            color: '#fff',
            padding: 5,
            position: 'end'
          }
        }
      }
    }
  }

  return <Bar data={data} ref={ref} options={options} />
}

export default BarChart

注意事项 #

• 如果你的数据结构有多个数据集，需要调整平均值计算逻辑，确保取到正确的数值数组
• 可根据需求自定义参考线的颜色、线宽、样式，以及标签的外观
• 确保插件版本与chart.js/react-chartjs-2版本兼容，若出现报错可尝试调整插件版本

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