Chart.js로 시작하기: 척도

() translation by (you can also view the original English article)

여러분은 지난 4개의 튜토리얼에서 Chart.js에 관하여 꽤 많이 배웠습니다. 첫 4개의 튜토리얼을 본 후, 이젠 툴팁과 레이블을 원하는 대로 바꾸고, 서체를 변경하며, 다른 종류의 차트를 생성할 수 있어야 합니다. 이 튜토리얼 시리즈에서 아직까지 다루지 않은 Chart.js의 한 측면은 척도(scales)입니다.

척도는 라이브러리 버전 1.0 이후로 상당히 변해왔고 현재 매우 강력합니다. 여러분은 이 튜토리얼에서 척도를 조작해보고, 라이브러리에서 제공하는 여러 가지 옵션을 이용해 겉모습을 제어하는 방법을 학습할 것입니다.

그리드 선 바꾸기

그리드 선 관련 설정 옵션들은 모두 gridLines 키에 속한 척도 옵션 아래 중첩되어 있습니다. 이 키는 축(axes)에 수직으로 그어지는 그리드 선을 커스터마이징하는 옵션을 정의합니다. 여러분이 선 도표(line chart)와 막대 그래프 튜토리얼에서 만들었던 선 도표에서 그리드 선을 바꿔봅시다.

display 키를 써서 차트의 그리드 선을 보이거나 숨길 수 있습니다. 초기 설정값이 true라서 기본적으로 그리드 선이 보입니다. 그리드 선의 색상은 color 키를 사용해 명시해 줍니다. 만약 그리드 선이 실선이 아닌 대시 기호이길 바란다면, 그 길이와 간격 값을 borderDash 킷값으로 제공하면 됩니다. 여러분은 zeroLineWidth와 zeroLineColor 키를 개별로 사용해 1번째나 0번째 인덱스에 선 너비와 색상을 설정할 수 있습니다.

이제껏 봤던 모든 차트의 척도에서는 보는 이들이 특정 축이 무엇을 표현하는지 알게 해주는 설명 텍스트가 없었습니다. 이렇게 하면 차트는 도움이 되지 못합니다. 예를 들어 여러분이 자동차 속도에 관한 도표를 보고 y축에 표시된 속도 단위를 모른다면, 그 차트는 유용하지 않겠지요.

여러분은 display 키를 써서 차트에서 척도 레이블을 보이거나 숨길 수 있습니다. 척도 레이블은 기본적으로 보이지 않습니다. 여기 척도에서 보여줄 텍스트는 labelString 키에서 명시해 줍니다. 또한, 글꼴 색상과 글꼴 집합, 크기와 스타일은 각각 fontColor, fontFamily, fontSize, fontStyle을 이용해 제어할 수 있습니다.

다음은 위와 동일한 중고차 속도 차트로 다른 차트 옵션을 지정했습니다.

var chartOptions = {
  legend: {
    display: true,
    position: 'top',
    labels: {
      boxWidth: 80,
      fontColor: 'black'
    }
  },
  scales: {
    xAxes: [{
      gridLines: {
        display: false,
        color: "black"
      },
      scaleLabel: {
        display: true,
        labelString: "Time in Seconds",
        fontColor: "red"
      }
    }],
    yAxes: [{
      gridLines: {
        color: "black",
        borderDash: [2, 5],
      },
      scaleLabel: {
        display: true,
        labelString: "Speed in Miles per Hour",
        fontColor: "green"
      }
    }]
  }
};

offsetGridLines로 부르는 키가 하나 더 있습니다. 값을 true로 설정했을 때에는 레이블이 그리드 선의 가운데로 이동합니다. 이는 대게 막대 그래프를 제작할 때 유용합니다.

선형 척도 설정하기

선형 척도는 수치화된 데이터를 차트로 만드는 데 사용됩니다. 이러한 척도는 x나 y축 중 하나에서 생성됩니다. 대부분의 경우에 Chart.js는 자동으로 척도의 최소 및 최댓값을 감지합니다. 그렇더라도 어느 정도 애매모호함을 낳을 수 있습니다.

여러분이 학급에 있는 학생 성적을 도표로 만들고 싶다고 가정해 봅시다. 만약에 테스트 최고점은 200이었지만 180점 이상 점수를 받은 학생이 없었다면, 척도는 거의 180에서 최고에 달할 것입니다. 그런 경우에 차트를 보는 이들은 최고점이 180인지 200인지 알 길이 없겠지요.

Chart.js에는 척도에 관해 다양한 키를 제어하는 다수의 내장 옵션이 있습니다. min과 max 키로 척도의 최소와 최댓값을 명시할 수 있습니다. 척도의 간격 크기는 stepSize 속성에서 제어됩니다. 이런 식으로 차트에 얼마나 많은 그리드 선이 있어야 하는지 결정하면 됩니다. 그리드 선과 점의 개수에 대해 한계를 설정하는 또 다른 방법은 maxTicksLimit 키를 사용하는 것입니다.

이 시리즈 중 이전 튜토리얼에 관한 막대 그래프에서 수평 눈금의 최소 및 최대 척도를 명시하는 코드는 다음과 같습니다.

var chartOptions = {
  scales: {
    yAxes: [{
      barPercentage: 0.5,
      gridLines: {
        display: false
      }
    }],
    xAxes: [{
      gridLines: {
        zeroLineColor: "black",
        zeroLineWidth: 2
      },
      ticks: {
        min: 0,
        max: 6500,
        stepSize: 1300
      },
      scaleLabel: {
        display: true,
        labelString: "Density in kg/m3"
      }
    }]
  },
  elements: {
    rectangle: {
      borderSkipped: 'left',
    }
  }
};

마치 선형 척도처럼 여러분은 차트에서 값을 표시하기 위해 대수 척도(logarithmic scales)를 제작할 수 있습니다. 이 경우에 대수 보간(logarithmic interpolation)은 축에서 점의 위치를 정하는 데 사용됩니다. 또한, 이런 척도는 x축과 y축 모두에 놓이기도 합니다.

방사형 선형 척도 설정하기

이런 종류의 척도는 레이더와 극지방(polar area) 차트 용도로 쓰입니다. 일반적인 선형 척도와 달리 이 척도는 축으로 위치가 정해지는 대신 차트 영역을 덮어씌웁니다.

방사형 척도에서 구체적으로 표시하는 키가 많이 있습니다. 예를 들어 그리드 선이 원형이나 직선이어야 하는지를 명시하는 데에는 lineArc를 사용하면 됩니다. 방사형 차트에서의 기본값은 false이며 극지방 차트에서는 true입니다.

angleLines 키를 사용해 차트 중심으로부터 점 레이블까지 퍼지는 선의 외관을 제어할 수 있습니다. 객체를 값으로 받습니다. 객체는 각도를 만드는 선(angle lines)의 색상과 너비를 제어하는 키를 가질 수 있습니다. display 킷값을 false로 설정해서 각도 선을 숨겨도 됩니다. 각도 선의 색상과 너비는 color와 lineWidth 키를 사용해 제어가 가능합니다.

점 레이블 모양은 pointLabels 키를 이용해 제어 가능합니다. 그저 앵글 라인처럼 이 키도 객체를 값으로 받습니다. 이 옵션은 lineArc 값이 false로 설정될 때만 효과가 있다는 것을 기억하세요. 글꼴 색상, 글꼴 집합, 크기, 스타일은 fontColor, fontFamily, fontSize, fontStyle 키를 이용해 명시하게 됩니다.

min과 max 키로 최소와 최대 크기를 설정할 수 있습니다. 크기에 관한 단계 크기(step size)와 눈금의 최대 수는 stepSize와 maxTicksLimit 키를 사용해 명시하면 됩니다. 이러한 옵션은 ticks 키 하위에서 이용할 수 있습니다. ticks 안에서 이용할 수 있는 다른 몇 가지 키는 showLabelBackdrop, backdropColor, backdropPaddingX, backDropPaddingY가 있습니다. 여러분은 이 옵션들을 tick 레이블 아래 있는 배경을 보이거나 숨기며, 너비와 높이, 색상을 제어할 수 있습니다.

또한, 그리드 선의 색상과 너비를 설정하도록 막대 그래프에서 사용했던 gridLines를 방사형 차트에서도 쓸 수 있습니다. 원하는 대로 변경한 척도가 있는 방사형 차트를 제작하는 옵션은 다음과 같습니다.

var chartOptions = {
  scale: {
    gridLines: {
      color: "black",
      lineWidth: 3
    },
    angleLines: {
      display: false
    },
    ticks: {
      beginAtZero: true,
      min: 0,
      max: 100,
      stepSize: 20
    },
    pointLabels: {
      fontSize: 18,
      fontColor: "green"
    }
  },
  legend: {
    position: 'left'
  }
};

시간 척도 설정하기

차트에서 시간과 날짜를 보여주기 위해 시간 척도를 사용할 수 있습니다. Chart.js 튜토리얼의 서론에서 얘기했듯이 여러분의 프로젝트에서 시간을 보여주기 위해서는 Moment.js를 포함해야 합니다. 시간 척도를 사용하는 데 생기는 한 가지 제한 사항은 x축으로만 보일 수 있다는 것입니다. 시간 척도와 관련한 설정과 옵션은 모두 time 하위 옵션 아래에 있습니다.

시간 척도를 생성하기 위해서는 type 킷값을 xAxes 하위 옵션 아래에 있는 time으로 설정해야 합니다. 그런 다음에 time 아래에서 킷값을 다양하게 설정하면 됩니다. 눈금을 그리는 데 사용되는 단위는 unit 키에서 설정하세요.

단위 간격은 unitStepSize 키에서 명시할 수 있습니다. 눈금 레이블이 보여지는 형식은 displayFormats 하위 옵션을 통해 명시됩니다. 적용 가능한 문자 형식에 대한 내용은 Moment.js 웹사이트에서 읽을 수 있습니다.

시간이 툴팁에서 보이는 형식은 tooltipFormat 키를 이용해 명시합니다.

round 키를 통해 차트에서 시간을 표시하기 전에 시간은 완성할 수 있습니다. round 값을 설정할 때 조심하세요. 값을 hour로 설정한다고 가정하면, 차트에 표시할 시간은 두 가지가 있습니다. 한 가지 시간이 5:30 AM이고 다른 하나가 5:50 AM이라면 둘 다 5:00 AM 눈금 표시에 보여야 할 것입니다. minute로 값을 설정하면 각각 5:30과 5:50 표시에 보여야 하겠지요.

튜토리얼 시작 부분에서 짜인 선형 차트는 다음의 코드와 함께 시간 척도를 사용해 표시될 수 있습니다.

var chartOptions = {
  legend: {
    display: true,
    position: 'top',
    labels: {
      boxWidth: 80,
      fontColor: 'black'
    }
  },
  scales: {
    xAxes: [{
      type: "time",
      time: {
        unit: 'hour',
        unitStepSize: 0.5,
        round: 'hour',
        tooltipFormat: "h:mm:ss a",
        displayFormats: {
          hour: 'MMM D, h:mm A'
        }
      }
    }],
    yAxes: [{
      gridLines: {
        color: "black",
        borderDash: [2, 5],
      },
      scaleLabel: {
        display: true,
        labelString: "Speed in Miles per Hour",
        fontColor: "green"
      }
    }]
  }
};

결론

이 튜토리얼에서 여러분은 Chart.js에서 여러 종류의 척도에 대해 학습했습니다. 이제는 색상과 최소 및 최댓값, 눈금 개수, 그 외 요인들을 제어함으로써 차트에서 척도를 원하는 대로 쉽게 변경할 수 있겠지요.

이 시리즈에 있는 다섯 개의 튜토리얼을 읽고 나서는 Chart.js에서 이용 가능한 온갖 종류의 차트를 제작할 수 있을 것입니다. 여러분이 이 튜토리얼과 시리즈를 맘에 들어 하셨으면 좋겠네요.

업무상 연구하거나 사용하려고 리소스를 추가로 찾고 있다면 Envato marketplace에서 이용할 수 있는 리소스를 확인해 보세요. 질문이 있다면 아래 댓글에 작성해 주시길 바랍니다. 여러분 프로젝트에서 이 라이브러리를 적용해 본 적이 있나요? 이 또한 아래 댓글에서 정보를 공유해 주세요.