React에서 chart.js

5139 단어 chart.jsReact
/사 mpぇー아 p/src/My쨩 rt. js
import React, { useRef, useEffect } from "react";
import Chart from "chart.js/auto";

const labels = ["January", "February", "March", "April", "May", "June"];
const data = {
  labels: labels,
  datasets: [
    {
      label: "My First dataset",
      backgroundColor: "rgb(255, 99, 132)",
      borderColor: "rgb(255, 99, 132)",
      data: [0, 10, 5, 2, 20, 30, 45],
    },
  ],
};
const config = {
  type: "line",
  data,
  options: {},
};

const MyChart = () => {
  const ref = useRef(null);

  useEffect(() => {
    const myChart = new Chart(ref.current, config);
  }, []);

  return (
    <div>
      <canvas id="myChart" ref={ref}></canvas>
    </div>
  );
};

export default MyChart;

좋은 웹페이지 즐겨찾기