折线图上没有呈现注释线

Question

折线图上方没有水平线。我哪里错了？我正在使用下面的库和像 bundler

这样的包裹

"chart.js": "^3.3.0",
"chartjs-plugin-annotation": "^1.0.1",
"react-chartjs-2": "^3.0.3",
"react": "^16.13.1",

这是我的代码

import React from 'react';
import './styles.css';

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

const data = {
  labels: [1, 2, 3, 4, 5],
  datasets: [
    {
      label: 'Line Chart',
      data: [0, 25, 45, 69, 80],
      fill: false,
      borderColor: 'rgba(75,192,192,1)',
    },
  ],
};
const line = {
  type: 'line',
  borderColor: '#FF8C00',
  borderWidth: 1,
  yMin: 50,
  yMax: 50,
};

const options = {
  annotation: {
    annotations: {
      line,
    },
  },
};

const LineChart = () => (
  <div>
    <Line className="line-chart" data={data} type="line" options={options} />
  </div>
);

export default LineChart;

我试过将 plugins 对象添加到 options 对象中，例如 here。
我试过让它像 this <- 它并没有那么过时

Answer 1

如入门页面上的大红色警告所述，您需要注册插件：https://www.chartjs.org/chartjs-plugin-annotation/guide/#getting-started

而不是：

import 'chartjs-plugin-annotation';

像这样导入并注册插件：

import annotationPlugin from 'chartjs-plugin-annotation';

Chart.register(annotationPlugin);

来源：https://www.chartjs.org/chartjs-plugin-annotation/guide/integration.html#bundlers-webpack-rollup-etc

折线图上没有呈现注释线

No rendered annotation line on Line Chart

reactjs

chart.js

react-chartjs-2