본문 바로가기

chart.js3

[Javascript] chart.js 를 사용하여 선 그래프 그리기 안녕하세요 오늘은 chart.js 라이브러리를 이용하여 선 그래프를 그려 볼려고 합니다. index.html 파일에 다음과 같이 코드를 작성해줍니다. 위와 같이 코드를 작성하면 다음과 같은 결과를 얻을 수 있습니다. 2024. 4. 9.
[ JavaScript ] Chart.js 라이브러리 사용해서 복합(막대, 라인) 그래프 그리기 안녕하세요, 오늘은 Chart.js 라이브러리를 사용해서 복합 그래프 (Mixed Chart) 를 그려보겠습니다. 이번 포스팅은 12월 17일자로 업로드 된 'Chart.js 라이브러리 사용해서 막대 그래프 그리기' 포스팅과 이어지는 내용입니다. 앞선 포스팅에서는 막대 그래프를 그렸고, 오늘은 그 위에 라인 그래프를 추가하겠습니다. 예제에 나와있는 라인 그래프 옵션 외에도 여러 가지가 있으므로 아래 링크를 참고해주세요. https://www.chartjs.org/docs/latest/charts/line.html Line Chart | Chart.js Line Chart A line chart is a way of plotting data points on a line. Often, it is used .. 2022. 12. 28.
[ JavaScript ] Chart.js 라이브러리 사용해서 막대 그래프 그리기 안녕하세요 오늘은 Chart.js 라이브러리를 사용해서 막대 그래프를 그려보겠습니다. Chart.js 는 자바스크립트 차트 라이브러리 중 하나로, d3.js, highcharts 등과 함께 인기있는 라이브러리 중 하나입니다. 설치 방법: - CDN 사용 - npm npm i chart.js 먼저 차트에 표시할 데이터를 준비하겠습니다. 공공데이터포털의 '부산광역시_하수처리시설 월별 평균 수질현황 서비스' 오픈API 데이터를 활용하겠습니다. Fetch API 를 사용해서 http 요청을 보내겠습니다. const serviceKey = "발급받은_본인의_인증키" const url = `http://apis.data.go.kr/6260000/BusanTblSwgqtyStusService/getTblSwgqtyS.. 2022. 12. 17.