chartjs 无法正确呈现日期答案

【问题标题】：chartjs doesn't render dates properlychartjs 无法正确呈现日期
【发布时间】：2021-04-02 15:50:52
【问题描述】：

我在 reactjs 中创建了一个自定义 chartjs 组件，并希望在 xAxes 中呈现日期，在 yAxes 中呈现从 -1 到 1 的数字，但它呈现数据的方式不正确。


import React, { useRef, useEffect } from "react";

import Chart from "chart.js";

const ChartComponent = ({ data, label, min, max }) => {
    const canvasRef = useRef(null);

    useEffect(() => {
        const canvasObj = canvasRef.current;
        const context = canvasObj.getContext("2d");

        new Chart(context, {
            type: "line",
            data: {
                datasets: [
                    {
                        label: label,
                        backgroundColor: "transparent",
                        data: data,
                    },
                ],
            },
            options: {
                scales: {
                    xAxes: [
                        {
                            type: "time",
                            distribution: "linear",
                            time: {
                                unit: "month",
                                displayFormats: {
                                    quarter: "YYYY mm dd",
                                },
                            },
                        },
                    ],
                    yAxes: [
                        {
                            ticks: {
                                suggestedMax: max,
                                suggestedMin: min,
                            },
                        },
                    ],
                },
            },
        });
    }, [data, label, min, max]);

    return <canvas ref={canvasRef}> </canvas>;
};

export default ChartComponent;

我正在将这样的数据传递给组件

<ChartComponent
    min={-1}
    max={1}
    label="date"
    data={[
        {
            x: "30/03/2018",
            y: 0.1158,
        },
        {
            x: "24/09/2018",
            y: 0.1975,
        },

        {
            x: "23/12/2018",
            y: 0.1913,
        },
        {
            x: "23/03/2019",
            y: 0.2137,
        },
    ]}
/>;

我不得不提一下，我已经做了同样的事情，而且工作正常，这是下面的示例

<ChartComponent
    min={1270}
    max={1272}
    label=" مساحت دریاچه"
    data={[
        {
            x: "04/02/2017",
            y: 1270.7,
        },

        {
            x: "06/26/2017",
            y: 1270.74,
        },

        {
            x: "09/19/2017",
            y: 1270.31,
        },
        {
            x: "12/18/2017",
            y: 1270.28,
        },
        {
            x: "06/16/2018",
            y: 1270.81,
        },
        {
            x: "09/24/2018",
            y: 1270.27,
        },
        {
            x: "12/23/2018",
            y: 1270.54,
        },
        {
            x: "05/25/2019",
            y: 1271.94,
        },
        {
            x: "06/18/2019",
            y: 1271.84,
        },
        {
            x: "09/19/2019",
            y: 1271.31,
        },
        {
            x: "12/18/2019",
            y: 1271.25,
        },
        {
            x: "03/12/2020",
            y: 1271.48,
        },
        {
            x: "06/25/2020",
            y: 1271.72,
        },
    ]}
/>;

任何建议将不胜感激。谢谢。

【问题讨论】：

标签： reactjs chart.js react-chartjs react-chartjs-2

【解决方案1】：

问题是您提供的日期字符串不是ISO 08601 也不是RFC 2822 Date time format，因此它们不能是Moment.js 的parsed，Chart.js 在内部使用。

要使其工作，您必须定义xAxes.time.parser: "DD.MM.YYYY"。

请查看下面的可运行代码，看看它是如何工作的。这是纯 JavaScript 示例，但它也应该适用于 react-chartjs-2。

new Chart("myChart", {
  type: "line",
  data: {
    datasets: [{
      label: 'My Dataset',
      data: [
          { x: "30/03/2018", y: 0.1158 },
          { x: "24/09/2018", y: -0.1975 },
          { x: "23/12/2018", y: 0.1913 },
          { x: "23/03/2019", y: -0.2137 }
        ],
      fill: false
    }]
  },
  options: {
    scales: {
      xAxes: [{
        type: "time",
        time: {
          parser: "DD.MM.YYYY",
          unit: "month",
          displayFormats: {
            month: "YYYY MM DD",
          }
        }
      }],
      yAxes: [{
        ticks: {
          suggestedMax: 1,
          suggestedMin: -1
        }
      }]
    }
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.bundle.min.js"></script>
<canvas id="myChart" height="100"></canvas>

正如我已经提到的，Chart.js 在内部使用 Moment.js 来实现time axis 的功能。因此，请务必使用 Chart.js 的 bundled version，将 Moment.js 包含在单个文件中。

【讨论】：