[javascript] Chartkick에서 사용 가능한 범례 색 설정 방법
Chartkick은 데이터 시각화를 위한 자바스크립트 라이브러리입니다. 이 라이브러리를 사용하여 차트를 생성하고 표현할 수 있습니다. 그러나 기본적으로 Chartkick은 범례 색상을 자동으로 설정합니다. 만약 특정 범례 색상을 지정하고 싶다면, 다음과 같은 방법으로 설정할 수 있습니다.
1. 데이터값을 색상으로 직접 매핑하기
new Chartkick.LineChart("chart-1", {"data": {"Series 1": {"2017-01-01": 1, "2017-02-01": 2, "2017-03-01": 3}, "Series 2": {"2017-01-01": 2, "2017-02-01": 3, "2017-03-01": 4}}}, {colors: ["blue", "green"]});
위의 코드에서 colors 옵션을 사용하여 범례 색상을 설정할 수 있습니다. colors에 배열 형태로 원하는 색상을 지정할 수 있습니다. 위의 예제에서는 “Series 1”에 파란색, “Series 2”에 초록색을 설정했습니다.
2. CSS를 사용하여 범례 스타일 변경
new Chartkick.LineChart("chart-1", {"data": {"Series 1": {"2017-01-01": 1, "2017-02-01": 2, "2017-03-01": 3}, "Series 2": {"2017-01-01": 2, "2017-02-01": 3, "2017-03-01": 4}}});
<style>
.chart-1 .chart-legend li:nth-child(1) .chart-legend-color {
background-color: blue;
}
.chart-1 .chart-legend li:nth-child(2) .chart-legend-color {
background-color: green;
}
</style>
위의 코드에서는 CSS를 사용하여 범례 아이템의 색상을 직접 지정합니다. chart-1 클래스를 사용하여 차트의 범례를 선택하고 nth-child를 사용하여 원하는 범례 항목의 색상을 변경합니다. 위의 예제에서는 “Series 1”에 파란색, “Series 2”에 초록색을 설정했습니다.
위의 두 가지 방법으로 Chartkick에서 사용 가능한 범례 색 설정을 할 수 있습니다. 필요에 따라 적절한 방법을 선택하여 원하는 색상을 지정할 수 있습니다.