找不到正确使用 chartjs 注释插件的方法

Question

我目前正在尝试在我的 React 项目中使用插件 chartjs-plugin-annotation。 不幸的是，它不起作用......

他是我的实现：

import React, { Component } from "react";
//import "./css/tideComponent.css";
import jsonData from "./ressources/tideOostende2023.json";
import "chart.js/auto";
import { Chart } from "react-chartjs-2";
import * as ChartAnnotation from "chartjs-plugin-annotation";

class Tide extends Component {
  state = {
    dayDate: new Date().toJSON().slice(5, 10),
    highTide: "",
    highTide2: "",
    lowTide: "",
    lowTide2: "",
  };

  async componentDidMount() {
    const index = jsonData.findIndex(
      (item) => item.date === this.state.dayDate
    );
    //TODO store tide in an array(using split method) & filter low to high to have a correct graph

    this.setState({
      highTide: jsonData[index].highTide,
      highTide2: jsonData[index].highTide2,
      lowTide: jsonData[index].lowTide,
      lowTide2: jsonData[index].lowTide2,
    });
  }

  timeToNumeric(tideTime) {
    const tideTimeSplitted = tideTime.split(":");
    return tideTimeSplitted[0] * 1 + tideTimeSplitted[1] / 60;
  }

  handleTideData() {
    if (
      this.timeToNumeric(this.state.highTide) <
      this.timeToNumeric(this.state.lowTide)
    )
      return [
        { x: -2, y: 0.5 },
        { x: this.timeToNumeric(this.state.highTide), y: 1.5 },
        { x: this.timeToNumeric(this.state.lowTide), y: 0.5 },
        { x: this.timeToNumeric(this.state.highTide2), y: 1.5 },
        { x: this.timeToNumeric(this.state.lowTide2), y: 0.5 },
        { x: 26, y: 1.5 },
      ];
    return [
      { x: -2, y: 1.5 },
      { x: this.timeToNumeric(this.state.lowTide), y: 0.5 },
      { x: this.timeToNumeric(this.state.highTide), y: 1.5 },
      { x: this.timeToNumeric(this.state.lowTide2), y: 0.5 },
      { x: this.timeToNumeric(this.state.highTide2), y: 1.5 },
      { x: 26, y: 0.5 },
    ];
  }

  render() {
    const data = {
      datasets: [
        {
          data: this.handleTideData(),
          fill: false,
          backgroundColor: "rgb(35, 71, 89, 0.88)",
          borderColor: " rgb(35, 71, 79, 0.88)",
          tension: 0.4,
        },
      ],
    };
    const options = {
      annotation: {
        annotations: [
          {
            type: "line",
            mode: "horizontal",
            scaleID: "x",
            value: 1,
            borderColor: "white",
            borderWidth: 2,
          },
        ],
      },
      scales: {
        x: { min: 0, max: 24, ticks: { stepSize: 1 } },
        y: { min: 0, max: 2.2, display: false },
      },
      showLine: true,
      pointStyle: false,
      plugins: {
        legend: { display: false },
      },
    };

    return (
      <div className="tideContainer">
        <Chart
          type="scatter"
          data={data}
          options={options}
          plugins={ChartAnnotation}
        />
      </div>
    );
  }
}

export default Tide;`

我尝试了不同的方法，但仍然无法正常工作。 我还查看了关于 SO 的多个问题，但找不到我的解决方案。 Chart Js 与我的实现一起正常工作，只是插件不起作用。

预先感谢您的大力帮助！！！

Answer 1

我想我认为 react-chartjs-2 中的plugins属性应该是一个数组。

 <Chart
          type="scatter"
          data={data}
          options={options}
          plugins={[ChartAnnotation]}
        />

注释插件的选项配置不在正确的节点中。 它必须添加到options.plugins节点中。

const options = {
  plugins: { // <-- to add, was missing
  annotation: {
    annotations: [
      {
        type: "line",
        mode: "horizontal",
        scaleID: "x",
        value: 1,
        borderColor: "white",
        borderWidth: 2,
      },
    ],
  },
}