未呈现x轴上日期的React ChartJS数据

jgwigjjp  于 2023-05-22  发布在  Chart.js
关注(0)|答案(1)|浏览(212)

需要在x轴上显示日期的图表上显示数据

数据如下:

const data = {
    datasets: [
      {
        label: "Fe",
        borderColor: "Red",
        backgroundColor: "Red",
        showLine: true,
        hidden: true,
        data: [
          {
            x: "2/1/2021",
            y: 1,
            elementHover: "Fe 1 26726 2/1/2021 12:00:00 AM 20210205100603",
          },
          {
            x: "5/27/2021",
            y: 2,
            elementHover: "Fe 2 27650 5/27/2021 12:00:00 PM 20210601100803",
          },
          {
            x: "4/3/2022",
            y: 4,
            elementHover: "Fe 4 24667 4/3/2022 12:00:00 PM 20220405101102",
          },
          {
            x: "6/5/2022",
            y: 4,
            elementHover: "Fe 4 25126 6/5/2022 12:00:00 PM 20220613101104",
          },
          {
            x: "7/28/2022",
            y: 3,
            elementHover: "Fe 3 25554 7/28/2022 12:00:00 PM 20220804100105",
          },
          {
            x: "9/14/2022",
            y: 3,
            elementHover: "Fe 3 25990 9/14/2022 12:00:00 PM 20220927100604",
          },
        ],
      },
    ],
  };

图表选项:

var timeFormat = "MM/dd/yyyy";
  const [options, setOptions] = useState({
    elements: {
      pointStyle: "cross",
    },
    scales: {
      xAxes: [
        {
          type: "time",
          time: {
            format: timeFormat,
            tooltipFormat: "ll",
          },
          displayFormats: {
            year: "MM/yy/ddd",
          },
          scaleLabel: {
            display: true,
            labelString: "Date",
          },
        },
      ],
    },
    plugins: {
      datalabels: {
        display: false,
        color: "black",
        align: "top",
        formatter: function (value, context) {
          return value.y;
        },
      },
      legend: {
        position: "right",
        align: "center",
        labels: {
          boxWidth: 10,
          pointStyle: "cross",
        },
      },
      tooltip: {
        callbacks: {
          label: function (context) {
            return context.raw.elementHover;
          },
          title: function (context) {
            return "";
          },
        },
      },
    },
  });

图表:

<Grid item xs={12}>
            {chartData && (
              <Scatter
                ref={chartReference}
                style={{ width: "60%", height: "60%" }}
                type="Scatter"
                data={data}
                options={options}
              />
            )}
          </Grid>

控制台:

Invalid configuration for scale: xAxis
ctrmrzij

ctrmrzij1#

结果是缺少了“chartjs-adapter-moment”。把它添加到项目中,它工作了。

相关问题