scale
- 애증의 scale이다.
- 왜 애증이냐면 진짜 시간을 많이 쏟았기 때문이다..
- 특히 그래프 하나에 두 개의 데이터셋을 넣는게 상당히 어려웠다.
- 물론 알고나면 엄청나게 간단하다..
- 뭐든지 공식문서와 기초가 중요하다.
- 여기서 나오는 것들은 다 축을 의미한다.
x
- 나는 가로축을 x라는 이름으로 커스텀했다.
- 기본적으로 들어가야할 속성은
- axis: “x”
- postion: “bottom”
- 이다.
- 또 유용하게 쓸 수 있는게 ticks가 있는데 각 value마다의 스타일링을 할 수 있다.
- ticks: { // minRotation: 45, padding: 5, autoSkip: true, maxTicksLimit: 15, // label 조정 },
y
- 나는 세로축을 y라는 이름으로 커스텀했다.
- 기본적으로 들어가야할 속성은
- axis: “y”
- postion: “left”
- 기본적으로 아주 똑똑하게 chart.js가 값을 알아서 판별해주지만 조금 더 커스텀하고 싶다면
min: 0,
max: productTimeData.graph.salesData.max,
- 이런식으로 값을 지정해주면 그 값대로 조정이 가능하다.
- 또한,
- 를 해주면 기본적으로 설정되는 최대값에 무조건 1.2를 해주어 좀 더 넉넉하게 그래프를 그릴 수 있게 된다.
- afterDataLimits: scale => { scale.max = scale.max * 1.2; },
- ticks
- ticks는 간단하다.
- 나의 경우 세로축에 데이터 값이 나오지 말아야 했다.
- 이 경우 이 ticks를 false로 해주면 값이 나오지 않는다.
y_sub
- 하나의 그래프에 두 개의 데이터를 그리고 싶을 수 있다.
- 단, 여기서 내가 어려웠던점은 이 두 개의 데이터가 전혀 다른 환경의 값이기에
- y축의 범위가 완전 다르다는 점이다.
- ex. 물건의 수량과 그 가격 → [1, 2, 5, 7, 3], [12000, 30000, 57000, 183000, 50000]
- 이걸 해결하기 위해서 많은 구글링을 했지만 결국 답을 찾은 건 공식문서였다..
- 여기서 진짜 삽질을 많이 한게
- 공식문서에는 공식적으로 이 하나의 그래프에 2개의 데이터를 나타내는 방법이 나와있지 않다.
- 따라서 나는 예시 차트들을 하나씩 다 봤고
- scales의 Stacked Linear / CategoryConfigSetup에서 답을 찾았다.
사실 이 그래프 또한 내가 추구하는 방향과는 미묘하게 다른게 또 하나의 데이터가 임펄스 신호이다..
- 결론은
- 우선 데이터셋의 배열에 두 개의 객체를 넣어준다.
datasets: [
{
label: 'Dataset 1',
data: [10, 30, 50, 20, 25, 44, -10],
borderColor: Utils.CHART_COLORS.red,
backgroundColor: Utils.CHART_COLORS.red,
},
{
label: 'Dataset 2',
data: ['ON', 'ON', 'OFF', 'ON', 'OFF', 'OFF', 'ON'],
borderColor: Utils.CHART_COLORS.blue,
backgroundColor: Utils.CHART_COLORS.blue,
stepped: true,
yAxisID: 'y_sub',
}
]
- 여기서 눈치빠른 사람은 발견했을 수도 있는데 바로 저 yAxisID 이게 핵심이었다.
- 저 값을 우리가 새로 원하는 scale로 써주면 된다.
- 즉 우리의 scale에는
- const chartOptions0052 = { scales: { x: {}, y: {}, y_sub: {}, } }
- 이렇게 된다.
- 이때 나는 두 데이터의 범위가 달랐기에 y와 y_sub의 min, max를 따로 지정해주었다.
- 하고 나서는 진짜 허탈했다..
- (문제가 정말 안 풀릴때는 잠시 다른 일을 하다가 다시 시도하면 놀랍게도 그때는 생각하지 못했던 방향으로 손쉽게 풀리는 경우가 종종 있다는데 이게 나에게는 이렇게 풀렸다..)
끝으로
- 사용법이 조금만 숙달되면 바로 사용할 수 있을 정도로 쉽고
- 공식문서가 워낙 잘되어 있어서 정말 좋은 차트 라이브러리였다.
- 공식문서가 중요하다!