ChartJS/react-chartjs-2向条形图添加水平参考线

Question

我正在使用 ChartJS/react-chartjs-2 创建条形图。 条形图显示正常，没什么特别的：

我想添加一条水平线来显示多年来总计的平均值，以查看每个演员相对于该平均值的表现如何。我发现了两个问题：

1. 如何在条形图Chartjs上绘制水平线

2. Chart.js - 根据某个 y 值绘制水平线

但他们不使用react-chartjs-2包装器。我正在 NextJS 中构建。我对整个事情的理解不足以将其转化为react-chartjs-2。也许有人知道？

import { Chart as ChartJS } from "chart.js/auto"
import { Bar } from "react-chartjs-2"
/* just pasting my element here, no need for the whole component */
 <Bar data={data} ref={ref} options={options} />

Answer 1

看起来有人评论了一个适合您的可行解决方案，但只是想补充一点，我目前正在使用此插件执行此操作：chartjs-plugin-annotation

实例化图表时，您必须注册新插件：

import { Line } from 'react-chartjs-2';

import {
    TimeScale,
    LinearScale,
    CategoryScale,
    Title,
    PointElement,
    LineElement,
    Tooltip,
    Chart,
    Filler,
} from 'chart.js';

import annotationPlugin from 'chartjs-plugin-annotation';

import 'chartjs-adapter-date-fns';

Chart.register(
    CategoryScale,
    LinearScale,
    Title,
    PointElement,
    LineElement,
    Tooltip,
    TimeScale,
    Filler,
    annotationPlugin
);

export default Line;

然后通过非常简单的配置来添加该行，又好又简单

const options = {
  ...,
  plugins: {
    annotation: {
      annotations: {
        line1: {
          type: 'line',
          yMin: 60,
          yMax: 60,
          borderColor: 'rgb(255, 99, 132)',
          borderWidth: 2,
        }
      }
    }
  }
};