我的 ChartJS 日期无法从 coinranking API 正确显示答案

【问题标题】：My ChartJS dates don't show up correctly from coinranking API我的 ChartJS 日期无法从 coinranking API 正确显示
【发布时间】：2023-02-09 20:24:12
【问题描述】：

下面是我的代码，用于显示加密硬币的图表以及一段时间内的价格变化。我还包含了 jsx 文件和 .env 文件

jsx:

import React from 'react';
import { Line } from 'react-chartjs-2';
import { Col, Row, Typography } from 'antd';

const { Title } = Typography;

const LineChart = ({ coinHistory, currentPrice, coinName }) => {
  const coinPrice = [];
  const coinTimestamp = [];

  for (let i = 0; i < coinHistory?.data?.history?.length; i += 1) {
    coinPrice.push(coinHistory?.data?.history[i].price);
  }

  for (let i = 0; i < coinHistory?.data?.history?.length; i += 1) {
    coinTimestamp.push(new Date(coinHistory?.data?.history[i].timestamp).toLocaleDateString());
  }
  const data = {
    labels: coinTimestamp,
    datasets: [
      {
        label: 'Price In USD',
        data: coinPrice,
        fill: false,
        backgroundColor: '#0071bd',
        borderColor: '#0071bd',
      },
    ],
  };

  const options = {
    scales: {
      yAxes: [
        {
          ticks: {
            beginAtZero: true,
          },
        },
      ],
    },
  };

  return (
    <>
      <Row className="chart-header">
        <Title level={2} className="chart-title">{coinName} Price Chart </Title>
        <Col className="price-container">
          <Title level={5} className="price-change">Change: {coinHistory?.data?.change}%</Title>
          <Title level={5} className="current-price">Current {coinName} Price: $ {currentPrice}</Title>
        </Col>
      </Row>
      <Line data={data} options={options} />
    </>
  );
};

export default LineChart;

.js 文件：

import { createApi, fetchBaseQuery } from '@reduxjs/toolkit/query/react';

const cryptoApiHeaders = {
  'x-rapidapi-host': process.env.REACT_APP_CRYPTO_RAPIDAPI_HOST,
  'x-rapidapi-key': process.env.REACT_APP_RAPIDAPI_KEY,
};
const createRequest = (url) => ({ url, headers: cryptoApiHeaders });

export const cryptoApi = createApi({
  reducerPath: 'cryptoApi',
  baseQuery: fetchBaseQuery({ baseUrl: process.env.REACT_APP_CRYPTO_API_URL }),
  endpoints: (builder) => ({
    getCryptos: builder.query({
      query: (count) => createRequest(`/coins?limit=${count}`),
    }),

    getCryptoDetails: builder.query({
      query: (coinId) => createRequest(`/coin/${coinId}`),
    }),

    getCryptoHistory: builder.query({
      query: ({ coinId, timeperiod }) => createRequest(`coin/${coinId}/history?timeperiod=${timeperiod}`),
    }),

    getExchanges: builder.query({
      query: () => createRequest('/exchanges'),
    }),
  }),
});

export const {
  useGetCryptosQuery,
  useGetCryptoDetailsQuery,
  useGetExchangesQuery,
  useGetCryptoHistoryQuery,
} = cryptoApi;

环境：

REACT_APP_RAPIDAPI_KEY =  'my_key'
REACT_APP_CRYPTO_API_URL = 'https://coinranking1.p.rapidapi.com'
REACT_APP_NEWS_API_URL = 'https://bing-news-search1.p.rapidapi.com'
REACT_APP_NEWS_RAPIDAPI_HOST = 'bing-news-search1.p.rapidapi.com'
REACT_APP_CRYPTO_RAPIDAPI_HOST ='coinranking1.p.rapidapi.com'

ESLINT_NO_DEV_ERRORS=true

当我运行 React 代码时，我得到的都是 19/1/1970 作为图表上的日期，我不确定为什么真实日期没有显示在图表中。其他数据正在显示，所以我相信密钥没问题。

【问题讨论】：

我遇到了同样的问题...看起来无论将什么 timePeriod 传递给 api，时间戳都会显示...'7d'、'1m'、'1y'、'5y' 等都一样。有人能帮忙吗我们？

标签： reactjs api chart.js cryptocurrency

【解决方案1】：

如果您使用 ChartJS V.3 ->

首先，您应该添加一个日期适配器，如果您使用 date-fns 或 moment，则每个示例都有一个适配器：

import {
        Chart as ChartJS,
        LinearScale,
        PointElement,
        LineElement,
        Tooltip,
        Filler,
        TimeScale,
    } from 'chart.js'
    
    import "chartjs-adapter-moment"
    
    ChartJS.register(
        LinearScale,
        TimeScale,
        PointElement,
        Filler,
LineElement,
    Tooltip,
)

然后你必须在你的 xAxes 选项中添加时间格式：

  x: {
                    type: 'time',
                    time: {
                        unit: "day",
                        displayFormats: {
                            day: "MMM DD YYYY" // or whatever you want to display your date
                        }
                    },
}

如果您使用 ChartJS V2：

不要安装适配器，它不是必需的，但在你的 Scales Options 中添加：

xAxes: [
                    {
                        // stacked: true,
                        type: 'time',
                        time: {
                            unit: 'day',
                            displayFormats: {
                                day: 'MMM DD YYYY'
                            }
                        },
                    },
                ],

【讨论】：

【解决方案2】：

您只需要在将日期推送到 timeStamp 数组时进行微小的更改。做这个

coinTimeStamp.push(new Date(coinHistory.data.history[i].timestamp*1000).toLocaleDateString());

您需要将时间戳乘以 1000。

【讨论】：