注释消息不出现。使用 Chart.js 、 react-chart-js 和 chartjs-plugin-annotation

Question

显示代码

import React from "react";
import {
  Chart as ChartJS,
  CategoryScale,
  LinearScale,
  PointElement,
  LineElement,
  Title,
  Tooltip,
  Legend,
} from "chart.js";
import { Line } from "react-chartjs-2";

import annotationPlugin from "chartjs-plugin-annotation";

ChartJS.register(
  CategoryScale,
  LinearScale,
  PointElement,
  LineElement,
  Title,
  Tooltip,
  Legend,
  annotationPlugin
);

export const options = {
  responsive: true,
  plugins: {
    legend: {
      position: "top",
    },
    title: {
      display: true,
      text: "Chart.js Line Chart",
    },
    annotation: {
      annotations: {
        line1: {
          adjustScaleRange: true,
          drawTime: "afterDatasetsDraw",
          type: "line",

          scaleID: "x",
          value: 1,
          borderColor: "rgba(104,1)",

          label: {
            enabled: true,
            content: "Hi !!",
            backgroundColor: "rgba(255, 26, 104, 0.8)",
            color: "black",
          },
        },
      },
    },
  },
};

const labels = [1, 2, 3, 4];

export const data = {
  labels,
  datasets: [
    {
      label: "My First Dataset",
      data: [65, 59, 80, 81, 56, 55, 40],
      fill: false,
      borderColor: "rgb(75, 192, 192)",
      tension: 0.1,
    },
  ],
};

export function ChartPrueba() {
  return (
    <div>
      <h1>Example react-chartjs-2 Chart with the annotation plugin</h1>
      <Line options={options} data={data} />;
    </div>
  );
}

我尝试禁用 tailwindcss 并将其直接导入到应用程序中，我使用 Vite，这些是依赖项

 "dependencies": {
    "chart.js": "^4.2.1",
    "chartjs-plugin-annotation": "^2.2.1",
    "react": "^18.2.0",
    "react-chartjs-2": "^5.2.0",
    "react-dom": "^18.2.0"
  },

Stack 让我输入更多我不知道为什么的词。 一切都已经存在，所以我添加随机词。 Stack 让我说更多我不知道为什么的话。 一切都已经存在，所以我添加随机词。 Stack 让我说更多我不知道为什么的话。 一切都已经存在，所以我添加随机词。 Stack 让我说更多我不知道为什么的话。 一切都已经存在，所以我添加随机词。 Stack 让我说更多我不知道为什么的话。 一切都已经存在，所以我添加随机词。 Stack 让我说更多我不知道为什么的话。 一切都已经存在，所以我添加随机词。

}