折线图上没有渲染的注释线

问题描述

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,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

解决方法

如入门页面上的红色大警告所述，您需要注册插件：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