react-chartjs-2 选项道具没有按预期工作

问题描述

我正在使用 react-chartjs-2 来构建折线图，但我在 options 属性中指定的所有选项都不起作用。

这是我的代码：

import React,{ useState,useEffect } from "react";
// import Chart from "chart.js";
import { Line } from "react-chartjs-2";
import moment from "moment";

export default function CardLineChartRN(props) {

  const [deviceMsgs,setDeviceMsgs] = useState(null);

  useEffect(() => {
    getMsg();
   },[]);

  const getMsg = async () => {
    // To get Today's data

    const todaysDate = moment().format("YYYY-MM-DD");

    try {
      const response = await fetch("http://localhost:8000/APICALL",{
        method: "POST",headers: {
          "Content-Type": "application/json",Accept: "application/json",// Authorization: `Bearer ${auth.token}`,},body: JSON.stringify({
          name: props.name,date: todaysDate,}),});

      const res = await response.json();

      if (response.ok) {
        console.log("Resp recieved",res.msg);
        setDeviceMsgs(res.msg);
      } else {
        console.log("No devices=====>",res.msg);
        setDeviceMsgs(null);
      }
    } catch (e) {
      console.log("Error fetching ",e);
    }
  };


  return (
    <div>
      <Line
        data={{
          // labels: ['01:20','01:30','01:40','01:50','01:55','01:58'],labels:
            deviceMsgs && deviceMsgs.length > 0
              ? deviceMsgs.map((deviceMsg) => deviceMsg.time)
              : [""],datasets: [
            {
              label: "demo",data:
                deviceMsgs && deviceMsgs.length > 0
                  ? deviceMsgs.map(
                      (deviceMsg) => deviceMsg.msg[0].val
                    )
                  : [""],backgroundColor: "rgba(255,192,203,0.6)",borderColor: "red",borderWidth: 1,fill: true,borderWidth: 3,],}}
        height={400}
        width={1500}
        options={{
          maintainAspectRatio: false,repsonsive: true,animation: {
            duration: 0,scales: {
            xAxes: [
              {
                ticks: { display: false },gridLines: {
                  display: false,drawBorder: false,yAxes: [
              {
                ticks: { display: false },stacked: true,ticks: {
                  beginAtZero: true,legend: {
            display: false,tooltips: {
            enabled: false,}}
      />
    </div>
  );
}

我注意到只有动画选项有效，而其他选项无效。就像我不想在图表中显示图例一样，但即使将其设置为 false，它仍然会显示。

解决方法

如果您的 react-chartjs-2 版本为“3”，则将其降级为“2”。它对我有用。

,

我遇到了同样的问题；与最新的图表 js 文档一致，这些选项应该在进一步的插件部分中 - 请参阅此处的文档 https://www.chartjs.org/docs/latest/configuration/title.html