React 및 Plotly로 멋진 플롯 만들기

오늘은 React 웹 앱에서 사용할 수 있는 React 및 Plotly 라이브러리로 대화형 플롯을 만드는 방법을 보여 드리겠습니다!
요리 시작합니다!🍳

1 단계
이 튜토리얼에서는 암호화폐의 24시간 가격 변동을 플롯할 것입니다. 그렇게 하려면 데이터를 가져오는 API가 필요합니다. Alpha Vantage API를 사용하여 데이터를 가져옵니다. 웹 사이트에서 자신의 API 키를 가져오거나 데모 키를 사용할 수 있습니다.

API에서 데이터를 가져오기 위해 fetchData 함수를 사용합니다.

const fecthData = async () => {
  const apiKey = "demo";
  const url = `https://www.alphavantage.co/query?function=CRYPTO_INTRADAY&symbol=ETH&market=USD&interval=5min&apikey=${apiKey}`;
  return fetch(url)
    .then((res) => {
      if (res.status === 200) {
        return res.json();
      }
    })
    .then((data) => {
      return data["Time Series Crypto (5min)"];
    });
};

이 함수는 데이터를 검색하는 데 시간이 걸리고 이 시간 동안 애플리케이션이 차단되는 것을 원하지 않기 때문에 비동기식입니다!

2 단계
그런 다음 Plotly를 설치해야 합니다. 이렇게 하려면 터미널에서 다음 명령을 실행하기만 하면 됩니다.npm install react-plotly.js plotly.js설치 후 상태 관리에 필요한 Plotly 및 React 후크를 가져옵니다.

import Plot from "react-plotly.js";
import { useState, useEffect } from "react";

3단계
우리는 앱을 위한 기능적인 React 컴포넌트를 생성할 것입니다:

export default function App() {
  const [data, setData] = useState([]);
  const [dataIsLoaded, setDataIsLoaded] = useState(false);
if (dataIsLoaded) {
    return <div>Loaded</div>;
 } else {
    return <div>Loading...</div>;
  }

데이터가 로드된 후에만 플롯을 표시합니다. 이를 위해 데이터를 가져올 때 true로 설정되는 부울 변수dataIsLoaded를 사용합니다. 검색된 데이터를 저장하는 데 변수data가 사용됩니다.

4단계
앱이 로드될 때 데이터를 한 번만 가져오려고 합니다. 이를 수행하기 위해 우리는 ReactuseEffect 후크를 사용할 것입니다. 이 후크 안에 작성하는 모든 것은 한 번만 실행됩니다.

useEffect(() => {
    fecthData().then((res) => {
      setData(res);
      setDataIsLoaded(true);
    });
  }, []);

우리는 .then와 함께 fetchData()를 사용합니다. 왜냐하면 그것이 Promise를 반환하고 이 Promise가 반환된 후에 우리 데이터 변수를 API의 응답으로 설정할 것이기 때문입니다. 그런 다음 dataIsLoaded를 true로 설정하여 플롯을 렌더링합니다.

5단계
플롯을 표시하려면 x축에 대해 x, y축에 대해 y 변수 x 및 y가 필요합니다.

const X = Object.keys(data);
const Y = X.map((date) => {
    return data[date]["1. open"];
  });

x축에는 날짜가 표시되고 y축에는 ETH의 시가가 표시됩니다.

6단계
꺾은선형 차트를 생성하기 위해 유형Plot 및 모드scatter의 lines 구성 요소를 사용합니다. 또한 제목을 추가하고 y축의 범위, 배경색 및 글꼴을 변경하는 레이아웃 옵션을 설정합니다.

if (dataIsLoaded) {
    return (
      <Plot
        data={[
          {
            x: X,
            y: Y,
            fill: "tonexty",
            type: "scatter",
            marker: { color: "#8000DE" }
          }
        ]}
        layout={{
          width: 500,
          height: 300,
          title: "ETH-USD",
          yaxis: {
            range: [2850, 3000],
            type: "linear"
          },
          paper_bgcolor: "rgb(243, 243, 243)",
          plot_bgcolor: "#f3f3f3",
          family: "Courier New, monospace"
        }}
      />
    );
  }

다음과 같이 얻어야 합니다.

그리고 플롯 아래에 채우기를 추가하려면 데이터에서 fill 속성을 사용하십시오.

data={[
          {
            x: X,
            y: Y,
            fill: "tonexty", // add this
            type: "scatter",
            mode: "lines",
            marker: { color: "#8000DE" }
          }
        ]}

공식Plotly 웹사이트에서 다양한 플롯 유형과 속성에 대해 자세히 알아볼 수 있습니다.
또한 my CodeSandBox 에서 모든 소스 코드와 라이브 데모를 볼 수 있습니다.

그게 다야!😃
이 튜토리얼과 행복한 코딩이 마음에 드셨기를 바랍니다!