json 파일로 변환후, HIGHCHARTS 차트를 사용하여 그래프 생성

결과

내용

• Import 버큰클릭시 브라우저 기본 파일 탐색기 호출
• 지정한 "chart.json" 파일 첨부
• json 파일 파싱, 그래프 생성

코드

import Highcharts from 'highcharts';

  const [upload, setUpload] = useState(false); //json 파일이면 조건부 렌더링에서 true가 될 state
  const [data, setData] = useState([]); //Chart.json에서 데이터를 담을 state

  //Chart.json에서 데이터를 가져옴
  useEffect(() => {
    fetch('data/Chart.json')
      .then(res => res.json())
      .then(data => {
        setData(data.res);
      });
  }, []);

  //첫번째 차트
  useEffect(() => {
    async function chartRequest() {
      const chart = await Highcharts.chart('request', {
        chart: {
          type: 'line',
        },
        title: {
          text: '',
        },
        yAxis: {
          title: '',
        },
        yAxis: {
          title: {
            text: '',
          },
        },
        credits: {
          enabled: false,
        },
        series: [
          {
            name: '',
            data: data[0].data,
          },
        ],
      });
    }
    chartRequest();
  }, [!upload]);

  //두번째 차트
  useEffect(() => {
    async function chartTotal() {
      const chart = await Highcharts.chart('request_total', {
        chart: {
          type: 'line',
        },
        title: {
          text: '',
        },
        yAxis: {
          title: '',
        },
        yAxis: {
          title: {
            text: '',
          },
        },
        credits: {
          enabled: false,
        },
        series: [
          {
            name: '',
            data: data[1].data,
          },
        ],
      });
    }
    chartTotal();
  }, [upload]);

  //import 버튼을 누르면 실행되는 함수
  //해당 파일이 json 파일이면 조건부 렌더링으로 차트가 나타남
  const handleCheck = e => {
    const values = e.target.value.includes('chart.json');

    if (values) setUpload(!upload);
  };

  return (
    <Main>
      <Title titleText="Chart" />
      <TwoButton buttonTextFirst="Import" handleCheck={handleCheck} />
      {upload && (
        <BasicChart
          data={data}
          request="request"
          request_total="request_total"
        />
      )}
    </Main>
  );
};