[javascript] Chartist에서 차트의 직교 또는 극좌표 설정 변경하기
Chartist는 JavaScript로 작성된 간단하면서도 강력한 차트 라이브러리입니다. 이 라이브러리를 사용하면 직교 또는 극좌표 설정을 통해 다양한 유형의 차트를 만들 수 있습니다.
직교 좌표 설정 변경하기
직교 좌표는 일반적으로 막대 그래프나 선 그래프에서 사용되는 기본적인 좌표 시스템입니다. 직교 좌표 설정을 변경하여 차트를 원하는 대로 제어할 수 있습니다.
const chart = new Chartist.Line('.ct-chart', {
labels: ['월', '화', '수', '목', '금'],
series: [
[5, 2, 4, 9, 7]
]
}, {
axisX: {
showGrid: false
},
axisY: {
showGrid: true
}
});
위의 예제에서는 axisX
와 axisY
객체를 사용하여 X축과 Y축에 대한 설정을 변경했습니다. showGrid
속성을 true
또는 false
로 설정하여 그리드를 표시할지 여부를 결정할 수 있습니다.
극좌표 설정 변경하기
극좌표는 각도와 거리를 사용하여 데이터를 표시하는 좌표 시스템입니다. 극좌표 설정을 변경하여 차트를 원하는대로 제어할 수 있습니다.
const chart = new Chartist.Pie('.ct-chart', {
series: [5, 10, 15, 20]
}, {
donut: true,
donutWidth: 60,
startAngle: 270,
total: 100,
showLabel: true
});
위의 예제에서는 donut
, donutWidth
, startAngle
, total
, showLabel
등의 속성을 사용하여 극좌표 차트에 대한 설정을 변경했습니다. 이러한 설정을 사용하여 원하는 모양과 스타일의 차트를 만들 수 있습니다.
더 자세한 정보는 Chartist 공식 문서를 참조하십시오.