코로나19 백신 접종 현황 차트 페이지 만들기 - (5) highchart 라이브러리와 piechart

 

1. highchart 사용하기

이 예제에서는 highchart의 데모 예제 코드를 그대로 가져와서 커스터마이징을 하였다. 특별한 형태로 차트를 만들어야 하는 경우가 아니라면 대부분 유형의 차트는 데모에 이미 만들어져 있으므로 예제 코드를 그대로 가져와서 데이터와 디자인만 커스터마이지하면 웬만한 차트는 그릴 수 있다.

highchart 웹페이지에 접속하여 상단 demo 메뉴의 Highcharts Demos를 선택하면 다양한 유형의 차트 예제를 확인할 수 있다.

데모 차트 하나를 선택하면 해당 차트를 자세히 확인할 수 있다. EDIT IN JSFIDDLE 버튼을 클릭하면 해당 차트의 상세 코드를 확인할 수 있는 JSfiddle 페이지가 열린다.

 

2. piechart

파이차트는 전체에 대한 각 비율을 백분율로 보여준다. 따라서 파이차트를 그리기 위해서는 주어진 데이터를 전체 데이터 대비 비율의 형태로 가공하여야 한다. 

전체 데이터, 즉 100에 해당되는 데이터는 메트릭 차트에서 구한 전세계 백신 접종 완료자수로 잡았다. 각 비율은 국가별 백신 완료자수로 하였는데, 모든 데이터를 다 표시하면 차트가 복잡해지므로 상위 5개국만 잘라서 보여주기로 하고 나머지는 기타(other) 항목으로 합쳤다. 즉, 이 차트에서는 전세계 백신 접종 완료자수 대비 백신 접종 완료자수가 가장 많은 국가 상위 5개국에 대한 각 비율을 보여주는 차트라고 할 수 있다.

router.post("/pie", async (req, res) => {
  const query = `
    SELECT country, MAX(people_fully_vaccinated) AS total 
    FROM "country-vaccinations"
    WHERE people_fully_vaccinated>0 
    GROUP BY country
    ORDER BY total DESC 
  `;
  try {
    const data = await getDataUsingSql(query);

    const sortedData = data.rows.sort((a, b) => b[1] - a[1]);
    const pieData = sortedData.slice(0, 5);

    const total = sortedData.map(el => el[1]).reduce((a, b) => a + b);
    const other = total - (pieData.map(el => el[1]).reduce((a, b) => a + b));
    pieData.push(["other", other]);
    pieData.push(["total", total]);

    res.json(pieData)
  } catch (err) {
    console.error(err);
  }
});

메트릭 차트에서 언급했듯이, 백신 접종자수 또는 백신 접종 완료자수는 누적 데이터이므로 가장 최근 데이터가 가장 큰 데이터이다. 따라서 MAX 집계로 데이터를 조회하되, 국가별(country)로 데이터를 분류하였다(group by). 

쿼리를 실행하여 얻은 결과 데이터는 rows에 저장되어 있다. "country, 집계 데이터" 형태로 select 했으므로 [국가명, 데이터] 형태로 된 데이터의 배열이 조회된다. 이 데이터에서 상위 5개국 데이터를 구하기 위해 sort 함수로 정렬한 후 slice 함수로 상위 5개 데이터를 잘라내어 변수에 저장하였다(pieData). 구한 데이터를 모두 합하여 전체 합계 데이터(total)를 구하고, 이 데이터에서 상위 5개 데이터의 합계를 빼서 기타 합계 데이터(other)를 구하였다. other와 total을 pieData 배열에 추가한 후, 클라이언트로 이 배열 데이터를 전달한다.

 

 

function drawPieChart() {
  $.ajax({
    url: "pie",
    type: "POST",
    dataType: "json",
    success: function (result) {
      const total = result[result.length - 1][1];

      const fulldata = result.map(arr => {
        return {
          name: arr[0],
          y: Number(((arr[1] / total) * 100).toFixed(2)),
          count: arr[1]
        }
      });

      const data = fulldata.slice(0, fulldata.length - 1);

      const colorData = [...Highcharts.getOptions().colors];
      colorData[5] = "#bfbfbf";

      Highcharts.chart('piechart', {
        chart: {
          plotBackgroundColor: null,
          plotBorderWidth: null,
          plotShadow: false,
          type: 'pie',
        },
        title: {
          text: `People Fully Vaccinated TOP5 Countries<br>(total: ${addComma(total)})`
        },
        credits: {
          enabled: false
        },
        exporting: {
          enabled: false
        },
        tooltip: {
          formatter: function () {
            return this.series.name + ':<b>' + addComma(this.point.count) + '</b>';
          }
        },
        accessibility: {
          point: {
            valueSuffix: '%'
          }
        },
        plotOptions: {
          pie: {
            allowPointSelect: true,
            cursor: 'pointer',
            colors: colorData,
            dataLabels: {
              enabled: true,
              format: '<b>{point.name}</b>: {point.percentage:.1f} %'
            }
          }
        },
        series: [{
          name: 'People Fully Vaccinated',
          colorByPoint: true,
          data: data
        }]
      });

    },
    error: function (request, status, error) {
      console.error(error);
    }
  });
}

파이차트 코드는 highchart 데모의 Pie chart를 사용하였다. 페이지 접속시 실행되는 함수에서 함수가 호출될 때 ajax 요청을 하여 서버로부터 데이터를 받아 데이터를 생성한다. 받은 데이터의 개별 수치 데이터를 백분율 값으로 변환한 후 파이 차트에서 요구하는 데이터 형태에 맞게 가공하여 series의 data의 값으로 전달하였다.