toast ui chart를 사용하려고하는데, data.categories, series에 들어가야하는 값이 검색결과에 따라 계속 바뀌어야하는데 방법을 알고싶습니다.

Question

Toast UI Chart를 사용해서 사이트 방문자 통계를 나타내고 싶습니다.line chart 형태로 나타내려 작업을 진행중입니다.const el &#61; document.getElementById('chart'); const data &#61; { categories: ['Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'], series: [{name: '방문자수', data: [5000, 3000, 5000, 7000, 6000, 4000, 1000], }], } ;const options &#61; {chart: { title: 'Monthly Revenue', width: 900, height: 400 },}; const chart &#61; Chart.lineChart({ el, data, options });스크립트를 이렇게 작성하니 정상적인 차트가 나타나는 것이 확인되었습니다.이제 위 스크립트에서 categories, series의 값이 변경되어야하는데,이 값은 고정값이 아닙니다.예를들어 지난달을 조회한다면, 지난달 1일부터 마지막날까지의 데이터를 조회하여, category는 1일부터 마지막날까지의 날짜가 되고, series의 값은 조회해온 map의 key값을 날짜로해서, 데이터를 조회하여 입력하려고 합니다.그렇게 나온 값이 예를들면['2022-12-03': 5, '2022-12-07':23, '2022-12-31': 100]이라는 값을 가져왔을 때,categories : ['2022-12-01', '2022-12-02', '2022-12-03', ... , '2022-12-31']series : [{name: '방문자수',data: [0,0,5, ... 100]}]이러한 data가 되어 데이터가 입력되게 하고싶은데, 이를 어떻게 변경해야할지 모르겠습니다...우선 const data를 빈값으로 넣어서 텅 빈 차트를 만들고, 이후addSeries나 addData를 해야할 것 같은데, 어떻게 해야 제가 원하는 형태가 될지 감이 오지않습니다.어떻게 해야 제가 원하는 값이 들어가있는 차트가 생성될까요?

[object Object] · Accepted Answer

['2022-12-03': 5, '2022-12-07':23, '2022-12-31': 100] 는 문법에 맞지않아 그냥 object라고 생각하고 쓸게요.// 달로 검색하신다고 하셨으니 우선 상수로 두고 작성할게요. const [year, month] &#61; [2022, 12]; // 받아온 데이터 const fetchData &#61; { '2022-12-03': 5, '2022-12-07': 23, '2022-12-31': 100 }; // 해당 달만큼 배열을 만들고 // 원하는 날짜 형식으로 채워 넣고 // 해당 달의 배열만큼 돌면서 // 원하는 형식의 데이터를 채워 넣습니다. const item &#61; Array.from( { length: new Date(year, month, 0).getDate() }, (_, i) &#61;> &#96;${year}-${month}-${(i &#43; 1).toString().padStart(2, '0')}&#96;, ).reduce( ({ categories, series: [{ name, data }] }, dt) &#61;> ({ categories: [...categories, dt], series: [{ name, data: [...data, fetchData[dt] || 0] }], }), { categories: [], series: [{ name: '방문자수', data: [] }] }, );

toast ui chart를 사용하려고하는데, data.categories, series에 들어가야하는 값이 검색결과에 따라 계속 바뀌어야하는데 방법을 알고싶습니다.

1개의 답변

Q&A 목록