범죄 관리 시스템 - 통계 자료 시각화

전에 포스트에서는 통계 자료를 문자열로 만들어 SweetAlert 하였고 이번에는 그래프로 만들어 HTML에 출력한다.

 

파이썬 코드는 동일하다.

---

우선 html에 Chart.js를 사용할 수 있도록 다음 코들르 추가해준다.

    <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/4.4.0/chart.umd.min.js"></script>

 

그리고 그래프를 띄울 div를 만들고 canvas를 추가해준다.

        <div id = "inquiry_crime_data" style="display: none;">
            <canvas id="year_chart"></canvas>
            <canvas id="month_chart"></canvas>
        </div>

---

다음으로 Javascript이다.

우선 파이썬에서 전달받은 데이터를 변수에 저장해준다.

        const year_list = response.data.year_crime_data.map(item => item.year);
        const year_cnt_list = response.data.year_crime_data.map(item => item.count);

 

map 함수는 저번과 동일하여 배열 내에 데이터를 변형하여 새로운 배열로 만들 수 있다.

item에서 year만 뽑아서 year_list로 만들어 저장한다,

 

        let year_chart = document.getElementById('year_chart');
        let myChart = new Chart(year_chart, {
            type: 'bar',
            data: {
              labels: year_list,
              datasets: [
                {
                  label: 'year_cnt',
                  data: year_cnt_list,
                }
              ]
            },
          });

 

HTML에서 year_chart인 canvas를 가져와준다. 차트를 그려주기 위해 Chart를 사용한다.

막대 그래프를 만들어야 하므로 type: 'bar'를 사용하고, label은 년도가 적힌 year_list를, data는 년도별 범죄 횟수가 저장된 리스트인 year_cnt_list를 파라미터로 지정해주면 된다.

 

월별 그래프는 꺾은 선 차트를 만들기 위해 type : 'line'을 파라미터로 적용했다.

          const month_list = response.data.month_crime_data.map(item => item.month);
          const month_cnt_list = response.data.month_crime_data.map(item => item.count);
          let month_chart = document.getElementById('month_chart');
          let myChart2 = new Chart(month_chart, {
              type: 'line',
              data: {
                labels: month_list,
                datasets: [
                  {
                    label: 'month_cnt',
                    data: month_cnt_list,
                  }
                ]
              },
            });

 

---

이제 범죄 통계 자료가 그래프로 나타났다