0

我正在使用 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,
                },
                gridLines: {
                  display: false,
                  drawBorder: false,
                },
              },
            ],
          },
          legend: {
            display: false,
          },
          tooltips: {
            enabled: false,
          },
        }}
      />
    </div>
  );
}

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

4

2 回答 2

1

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

于 2021-06-07T11:01:02.333 回答
1

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

于 2021-08-09T09:24:17.247 回答