[javascript] Chartist에서 차트의 테마 설정 변경하기

01 Dec 2023

javascript

Chartist는 간단하고 유연한 차트 라이브러리로, 많은 개발자들이 사용하고 있습니다. Chartist는 다양한 테마 설정을 제공하여 차트의 외관을 변경할 수 있습니다. 이번 블로그 포스트에서는 Chartist에서 차트의 테마 설정을 변경하는 방법에 대해 알아보겠습니다.

Chartist 테마 설정 변경하기

Chartist에서 테마를 변경하려면 Chartist.plugins.ctInterpolation 플러그인을 사용해야 합니다. 이 플러그인을 사용하면 차트의 라인과 막대의 모양, 색상 등을 원하는 대로 변경할 수 있습니다.

먼저, 다음과 같은 HTML 파일을 만들어보겠습니다.

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Chartist Theme Example</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/chartist/dist/chartist.min.css">
</head>
<body>
  <div id="chart"></div>

  <script src="https://cdn.jsdelivr.net/npm/chartist/dist/chartist.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/chartist-plugin-ct-interpolation/dist/chartist-plugin-ct-interpolation.min.js"></script>
  <script>
    var data = {
      labels: ['월', '화', '수', '목', '금'],
      series: [
        [5, 2, 4, 8, 6]
      ]
    };

    var options = {
      lineSmooth: Chartist.Interpolation.cardinal({
        tension: 10
      }),
      fullWidth: true,
      chartPadding: {
        right: 20
      }
    };

    var responsiveOptions = [
      ['screen and (max-width: 767px)', {
        chartPadding: {
          right: 0
        }
      }]
    ];

    new Chartist.Line('#chart', data, options, responsiveOptions);
  </script>
</body>
</html>

위의 코드에서 Chartist.Interpolation.cardinal() 메서드를 사용하여 차트의 라인을 깔때기 모양으로 변경하고 있습니다. 이렇게 해서 차트의 테마를 변경할 수 있습니다.

여기서 Chartist.plugins.ctInterpolation 플러그인을 사용하려면 chartist-plugin-ct-interpolation 라이브러리를 추가해야 합니다. 이 라이브러리를 차트 생성하기 전에 <script> 태그를 통해 포함해주세요.

그러면 원하는 테마로 차트의 테마가 변경됩니다. 필요에 따라 테마 설정을 추가하거나 변경하여 다양한 스타일의 차트를 만들 수 있습니다.

Chartist 테마 설정 변경하기

참고 자료