Как я могу реализовать диаграмму JS в ReactJS?

Question

Я пытаюсь создать 2D-контекст для назначения диаграмме js. вот мой код:

function Dashboard() {
  const canvasRef = React.useRef<HTMLCanvasElement>(null);
  const [context, setContext] = React.useState<CanvasRenderingContext2D | null>(null);

  if (canvasRef.current) {
    const renderCtx = canvasRef.current.getContext('2d');
    setContext(renderCtx);
  }

  var chart = new Chart(context, {
    // The type of chart we want to create
    type: 'line',

    // The data for our dataset
    data: {
      labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
      datasets: [{
        label: 'My First dataset',
        backgroundColor: 'rgb(255, 99, 132)',
        borderColor: 'rgb(255, 99, 132)',
        data: [0, 10, 5, 2, 20, 30, 45]
      }]
    },

    // Configuration options go here
    options: {}
  });

У меня ошибка в этой строке var chart = new Chart(context, {, которая говорит:

Argument of type 'CanvasRenderingContext2D | null' is not assignable to parameter of type 'string | HTMLCanvasElement | CanvasRenderingContext2D | ArrayLike<HTMLCanvasElement | CanvasRenderingContext2D>'.
  Type 'null' is not assignable to type 'string | HTMLCanvasElement | CanvasRenderingContext2D | ArrayLike<HTMLCanvasElement | CanvasRenderingContext2D>'.ts(2345)

Знаете, как я могу это исправить?

Answer 1

Правильная реализация React и Chart. js на Typescript находится здесь:

import React, { useEffect, useRef, useState } from 'react';
import Chart from 'chart.js';

function Dashboard() {
  const canvasRef = useRef<HTMLCanvasElement>(null);
  const [context, setContext] = useState<CanvasRenderingContext2D | null>(null);

  useEffect(() => {
    if (canvasRef && canvasRef.current) {
      const newChartInstance = new Chart(canvasRef.current, {
        // The type of chart we want to create
        type: 'pie',

        // The data for our dataset
        data: {
          labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
          datasets: [{
            label: 'My First dataset',
            backgroundColor: 'rgb(255, 99, 132)',
            borderColor: 'rgb(255, 99, 132)',
            data: [0, 10, 5, 2, 20, 30, 45]
          }]
        },

        // Configuration options go here
        options: {}
      });
    }
  }, [canvasRef])

return (
<canvas
    id="canvas"
    ref={canvasRef}
    width={500}
    height={500}
    style={{
        border: 'none',
        width: '100%',
    }}></canvas>
)
}

export default Dashboard;