c3 Chart 범례(legend) 클릭 시 순서가 변경된다?

이 부분이 범례다.

웹 페이지에서 데이터 시각화에 많이 사용되는 C3.js는 사용하기 쉽고 다양한 기능을 제공하는 차트 라이브러리입니다. 그러나 범례(legend) 클릭 시 데이터 순서가 변경되는 문제가 발생할 수 있습니다.

 

codepen으로 상황만 재현, 실제로는 클릭한 순간 범례가 바뀌는 현상이다.

1. 문제점?

C3.js에서 차트를 생성하고, 범례를 클릭하면 데이터가 표시되거나 숨겨집니다. 하지만 기본 설정에서는 범례를 클릭할 때 데이터의 순서가 자동으로 변경되는 문제가 발생할 수 있습니다. 이는 사용자가 데이터의 순서에 의존하는 경우, 불편을 초래할 수 있습니다.

 

2. 해결 방법: data.order 옵션 사용

C3.js는 data.order 옵션을 제공하여 데이터의 순서를 제어할 수 있습니다. 이 옵션을 적절하게 설정함으로써 범례 클릭 시 데이터 순서가 변경되지 않도록 고정할 수 있습니다.

data.order는 다음과 같은 네 가지 값을 가질 수 있습니다:

• desc: 데이터 값을 내림차순으로 정렬.
• asc: 데이터 값을 오름차순으로 정렬.
• function: 사용자가 정의한 커스텀 정렬 함수.
• null: 데이터 로드 순서를 유지(데이터 순서를 변경하지 않음)

 

3. 해결 코드 예시

data.order 옵션을 null로 설정하여 데이터가 로드된 순서를 유지함으로써, 범례 클릭 시 데이터 순서가 변경되지 않게 할 수 있습니다. 아래는 해결된 코드 예시입니다.

var chart = c3.generate({
    data: {
        columns: [
            ['data1', 30, 200, 100, 400, 150, 250],
            ['data2', 130, 100, 140, 200, 150, 50],
            ['data3', 130, 100, 140, 200, 150, 50],
        ],
        order: null, // 데이터 로드 순서를 유지
        type: 'bar'
    },
    bar: {
        width: {
            ratio: 0.5 // this makes bar width 50% of length between ticks
        }
        // or
        //width: 100 // this makes bar width 100px
    }
});

 

위 코드에서는 data.order: null을 설정함으로써 데이터가 차트에 처음 로드된 순서를 유지하게 됩니다. 이로 인해, 사용자가 범례를 클릭해도 데이터 순서가 변경되지 않습니다.

1. 기본 설정 문제: 범례를 클릭할 때 데이터가 정렬되면서 순서가 변경되는 현상이 발생했습니다.
2. 옵션 분석: C3.js의 data.order 옵션을 확인한 결과, 데이터의 정렬 방식을 제어할 수 있음을 발견했습니다.
3. 해결 방법 적용: data.order 옵션을 null로 설정하여 데이터 로드 순서를 고정했습니다. 그 결과, 범례 클릭 시에도 데이터 순서가 변경되지 않게 되었습니다.

---

C3.js에서 범례 클릭 시 데이터 순서가 변경되는 문제는 data.order 옵션을 활용해 쉽게 해결할 수 있습니다. data.order를 null로 설정하면 데이터는 로드된 순서를 유지하며, 범례 클릭에도 순서가 변하지 않게 됩니다.

 

이 방법은 차트의 데이터 순서를 유지하는 데 매우 간단하면서도 효과적인 해결책을 제공합니다. 데이터의 순서가 중요한 시각화 작업에서는 data.order 옵션을 적극적으로 활용해 보세요.