React/chart.js&react-chartjs-2로 산점도

chart.js&react-chartjs-2 설치

$ npm install --save react-chartjs-2 chart.js

chart.sj&react-chartjs-2로 산점도

import React, { useState, useEffect } from "react";
import axios from "axios";
import { Scatter } from "react-chartjs-2";

const MySample = () => {
  const [iris, setIris] = useState([]);

  useEffect(() => {
    axios.get("http://localhost:3000/iris.json").then((r) => {
      setIris(r.data);
    });
  }, []);
  console.log(iris);

  const xaxis = "SepalLength";
  const yaxis = "PetalLength";
  const data = {
    datasets: [
      {
        label: "Iris-setosa",
        data: iris
          .filter((x) => {
            return x.Class == "Iris-setosa";
          })
          .map((x) => {
            return [x[xaxis], x[yaxis]];
          }),
        borderColor: "rgba(255, 0, 0, 1)",
        backgroundColor: "rgba(255, 0, 0, 0.5)",
        pointRadius: 8,
      },
      {
        label: "Iris-versicolor",
        data: iris
          .filter((x) => {
            return x.Class == "Iris-versicolor";
          })
          .map((x) => {
            return [x[xaxis], x[yaxis]];
          }),
        borderColor: "rgba(0, 255, 0, 1)",
        backgroundColor: "rgba(0, 255, 0, 0.5)",
        pointRadius: 8,
      },
      {
        label: "Iris-virginica",
        data: iris
          .filter((x) => {
            return x.Class == "Iris-virginica";
          })
          .map((x) => {
            return [x[xaxis], x[yaxis]];
          }),
        borderColor: "rgba(0, 0, 255, 1)",
        backgroundColor: "rgba(0, 0, 255, 0.5)",
        pointRadius: 8,
      },
    ],
  };
  console.log(data);

  return <Scatter data={data} />;
};

export default MySample;

import logo from "./logo.svg";
import "./App.css";
import MySample from "./components/MySample";

function App() {
  return (
    <div className="App">
      <MySample />
    </div>
  );
}

export default App;