라인 그래프를 React에서 그려보자
자, 오늘은 라인 그래프를 그려야한다. 목표는 아래와 같다.
저번 포스팅에서 말한대로 나는 그래프를 그려본 적이 없으므로, 오늘도 차근차근 배우면서 작성해보자구.
위의 그래프는 react-highcharts 라이브러리 에서 ReactHighcharts를 import해서 사용했던 것같다.
// before version
import ReactHighcharts from 'react-highcharts'
하지만 왜인지 내가 react-hightcharts를 다운로드 하고싶어도 다운로드가 안되었고, react official 에서 제공하는 하이차트를 불러올 예정이다.
다운로드
npm i highcharts
npm i highcharts-react-official
2022년 나의 highchart의 버전은 10.0.0, highcharts-react-offical 버전은 3.1.0이다.
import해서 불러오기
import Highcharts from "highcharts";
import HighchartsReact from "highcharts-react-official";
https://github.com/highcharts/highcharts-react를 통해 아래의 것들을 개발하였으니 참고하세요!
Component사용
방금 불러온 HighcartsReact를 활용해본다. highcarts는 위에서 import해온 것이고, class를 지정하고 싶으면 containerProps를 지정해주면 된다. 또한, options 안에 정보를 넣어주면 그래프에 데이터가 들어가게 된다.
<HighchartsReact
containerProps={{ className: "home_body-chart" }}
highcharts={Highcharts}
options={options}
/>
나의 options는 위에 설정해두었는데
const options: Highcharts.Options = {
title: {
text: "",
},
series: [
{
type: "line",
data: {{데이터}},
},
],
};
데이터 칸에 number로 이루어져있는 array들을 넣으면 된다.
난 타이틀이 필요하지 않으므로 title안에 있는 text를 빈 스트링으로 대체했다.
하지만, 나는 바디가 그라데이션이 되어있길 원했고 찾아보니, 그러면 serise안에 type을 "area"로 바꿔야한다고한다.
label이 다 없었으면 좋겠어서 다 비워뒀다.
title: {
text: "",
},
xAxis: {
categories: [],
},
yAxis: {
min: 0,
title: {
text: "",
},
},
또한, 그라데이션을 입히기 위해 plotOptions안에 area option을 원하는 대로 처리하였다. 그라데이션은 아래 코드를 넣으면 되고 색을 입히면 된다.
plotOptions: {
area: {
fillColor: {
linearGradient: {
x1: 0,
y1: 0,
x2: 0,
y2: 1,
}
}
}
툴팁또한,해당 옵션 안에 넣으면된다.
tooltip: {
enabled: true,
headerFormat: "",
pointFormat: "Total: {point.y:,.0f}",
},
이렇게 하면 아래와 같은 그래프를 만들 수 있었다.
오늘도 프론트 앤드 개발자로서 한단계 성장 완료!
Author And Source
이 문제에 관하여(라인 그래프를 React에서 그려보자), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@parkyw1206/라인-그래프를-React에서-그려보자저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)