代码之家  ›  专栏  ›  技术社区  ›  Liam McWilliams

“类别”不是注册的量表

  •  0
  • Liam McWilliams  · 技术社区  · 2 年前

    我正在关注一个制作加密货币应用程序的视频,该应用程序显示有关加密货币价格历史的信息和折线图。然而,不管我尝试了什么,它都说“类别”不是一个注册的量表。当这是视频中的确切解决方案时。

    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;
    

    显示密码价格历史记录的一行的表,包括价格和日期。

    1 回复  |  直到 2 年前
        1
  •  1
  •   Taiwei Tuan    2 年前

    根据ChartJS官方网站,您需要 register 要使用的每个图表组件: https://www.chartjs.org/docs/3.3.0/getting-started/integration.html#bundlers-webpack-rollup-etc

    因此,最简单的方法是在代码中调用它们来注册所有Chartjs组件(从上面的官方文档中获得)

    import { Chart, registerables } from 'chart.js';
    Chart.register(...registerables);
    

    您绝对可以选择更换 registerables 仅限于您正在使用的组件(即 CategoryScale )

    以下是关于如何 登记 react-chart-js 项目 https://react-chartjs-2.netlify.app/examples/vertical-bar-chart/

        2
  •  0
  •   Worthy    2 年前

    当Chart.js图表中的刻度配置出现问题时,通常会出现错误消息“类别不是注册的刻度”。 您应该确保x轴刻度配置正确,以便将日期作为标签进行处理。您可以通过将比例类型指定为x轴的“时间”来完成此操作。

        3
  •  0
  •   santhosh kumar    2 年前

    尝试在顶部添加此

    从“Chart.js”导入{Chart,registerables}; Chart.register(…registerables);

    它解决了我的问题