typescript - Problem med chartjs og react-chartjs-2 i reactjs

Jeg prøvde å lage et linjediagram med temperaturdata, fuktighetsdata og lysstyrkedata. Jeg prøvde å nedgradere versjonen av chartjs og react-chartjs-2, men det fungerer ikke. Her er avhengighetene mine:

  "dependencies": {
    "antd": "^5.13.2",
    "chart.js": "^3.9.1",
    "react": "^18.2.0",
    "react-chartjs-2": "^4.3.1",
    "react-dom": "^18.2.0",
  },

Og koden min:

import React from 'react'
import { Line } from 'react-chartjs-2';

const GraphElement = () => {

  const chartData = {
    labels: timeData,
    datasets: [
      {
        label: 'Temperature',
        data: temperatureData,
        fill: false,
        borderColor: 'rgb(255, 99, 132)',
        tension: 0.1,
      },
      {
        label: 'Humidity',
        data: humidityData,
        fill: false,
        borderColor: 'rgb(75, 192, 192)',
        tension: 0.1,
      },
      {
        label: 'Brightness',
        data: brightnessData,
        fill: false,
        borderColor: 'rgb(255, 206, 86)',
        tension: 0.1,
      },
    ],
  }

  const options = {
    scales: {
      x: {
        type: 'linear',
        position: 'bottom',
      },
      y: {
          beginAtZero: true,
          max: 1000,
          type: 'linear',
      },
    },
  };


  return (
    <div className='graph--container'>
      ĐỒ THỊ 
      <Line key={chartKey} data={chartData} options={options} />
    </div>
  )
}

export default GraphElement;

Og jeg har dette problemet:

ERROR
"linear" is not a registered scale.
   
and 
Canvas is already in use. Chart with ID '0' must be destroyed before the canvas with ID '' can be reused.

Vennligst hjelp meg med dette, tusen takk

Prøvde å endre versjonen av chartjs og react-chartjs-2, men det fungerer ikke

Svar #1

Uansett hvilke feil du får, kommer det av at elementene ikke er registrert, vi kan gjøre dette med koden nedenfor.

import React from 'react';
import {
  Chart as ChartJS,
  CategoryScale,
  LinearScale,
  PointElement,
  LineElement,
  Title,
  Tooltip,
  Legend,
} from 'chart.js';
import { Line } from 'react-chartjs-2';
import faker from 'faker';

ChartJS.register(
  CategoryScale,
  LinearScale,
  PointElement,
  LineElement,
  Title,
  Tooltip,
  Legend
);

kode

Linjediagram prøve demo på deres nettside

Da jeg implementerte det samme, klarte jeg ikke å gjengi diagrammet. Jeg oppdaget at du satte linear på din x-akse. I mitt eksempel, siden data ikke er oppgitt, brukte jeg streng, så etter å ha fjernet linear, ble diagrammet gjengitt!

import { FC } from 'react';
import React from 'react';
import { Line } from 'react-chartjs-2';
import './style.css';
import {
  Chart as ChartJS,
  CategoryScale,
  LinearScale,
  PointElement,
  LineElement,
  Title,
  Tooltip,
  Legend,
} from 'chart.js';

ChartJS.register(
  CategoryScale,
  LinearScale,
  PointElement,
  LineElement,
  Title,
  Tooltip,
  Legend
);

export const App: FC<{ name: string }> = ({ name }) => {
  const labels = [
    'January',
    'February',
    'March',
    'April',
    'May',
    'June',
    'July',
  ];
  const chartData = {
    labels: ['test', 'test2', 'test3'],
    datasets: [
      {
        label: 'Temperature',
        data: labels.map(() => Math.floor(Math.random() * 1000) + 1),
        fill: false,
        borderColor: 'rgb(255, 99, 132)',
        tension: 0.1,
      },
      {
        label: 'Humidity',
        data: labels.map(() => Math.floor(Math.random() * 1000) + 1),
        fill: false,
        borderColor: 'rgb(75, 192, 192)',
        tension: 0.1,
      },
      {
        label: 'Brightness',
        data: labels.map(() => Math.floor(Math.random() * 1000) + 1),
        fill: false,
        borderColor: 'rgb(255, 206, 86)',
        tension: 0.1,
      },
    ],
  };

  const options = {
    scales: {
      y: {
        beginAtZero: true,
        max: 1000,
        type: 'linear',
      },
    },
  };
  const chartKey = 'line';

  return (
    <div className="graph--container">
      ĐỒ THỊ
      <Line data={chartData} options={options} />
    </div>
  );
};

stackblitz

Relaterte artikler