线图上没有呈现的注释行

Question

LineChart上方没有水平线。我哪里错了？我正在使用下面的库和包，就像邦德勒

"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对象中，比如这里。

我试过让它像这 <- -它还没那么过时

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