chartjs 无法正确呈现日期

问题描述

我在 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,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,]}
/>;

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

解决方法

问题是您提供的日期字符串既不是ISO 08601 也不是RFC 2822 Date time format，因此它们不能是parsed 的Moment.js，它是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。