[javascript] Chartist에서 차트의 직교 또는 극좌표 설정 변경하기

Chartist는 JavaScript로 작성된 간단하면서도 강력한 차트 라이브러리입니다. 이 라이브러리를 사용하면 직교 또는 극좌표 설정을 통해 다양한 유형의 차트를 만들 수 있습니다.

직교 좌표 설정 변경하기

직교 좌표는 일반적으로 막대 그래프나 선 그래프에서 사용되는 기본적인 좌표 시스템입니다. 직교 좌표 설정을 변경하여 차트를 원하는 대로 제어할 수 있습니다.

const chart = new Chartist.Line('.ct-chart', {
  labels: ['', '', '', '', ''],
  series: [
    [5, 2, 4, 9, 7]
  ]
}, {
  axisX: {
    showGrid: false
  },
  axisY: {
    showGrid: true
  }
});

위의 예제에서는 axisXaxisY 객체를 사용하여 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 공식 문서를 참조하십시오.