Colin's Blog
[javascript] Chartist에서 차트의 트렌드 라인 추가하기

Chartist는 간단하고 유연한 차트 라이브러리로, 다양한 종류의 차트를 생성할 수 있습니다. 이번에는 Chartist를 사용하여 차트에 트렌드 라인을 추가하는 방법에 대해 알아보겠습니다.

필요한 준비물

1. Chartist 라이브러리 추가하기

먼저, HTML 파일에 Chartist 라이브러리를 추가해야합니다. 다운로드 링크에서 최신 릴리즈를 다운로드하거나, CDN을 통해 라이브러리를 가져올 수도 있습니다. 아래는 CDN을 이용한 예시입니다.

<html>
<head>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/chartist.js/latest/chartist.min.css">
  <script src="https://cdn.jsdelivr.net/chartist.js/latest/chartist.min.js"></script>
</head>
<body>
...
</body>
</html>

2. 차트 생성하기

다음으로, Chartist를 사용하여 차트를 생성합니다. Chartist는 Chartist.Line() 함수를 사용하여 선 그래프를 생성합니다. 아래는 가장 간단한 형태의 선 그래프 생성 예시입니다.

// 차트 컨테이너 요소 선택하기
var chartContainer = document.getElementById('chart-container');

// 데이터 설정하기
var data = {
  labels: ['월', '화', '수', '목', '금'],
  series: [
    [5, 4, 7, 6, 8]
  ]
};

// 차트 옵션 설정하기
var options = {};

// 차트 생성하기
new Chartist.Line(chartContainer, data, options);

3. 트렌드 라인 추가하기

트렌드 라인을 추가하기 위해선 Chartist.Line() 함수의 plugins 옵션을 설정해야합니다. 아래는 트렌드 라인을 추가하는 예시입니다.

// 트렌드 라인 설정하기
var trendLine = {
  value: 6,
  className: 'trend-line',
  strokeDasharray: '3',
  label: '평균'
};

// 차트 옵션 설정하기 (plugins 옵션 추가)
var options = {
  plugins: [
    Chartist.plugins.ctGridLines({
      gridId: 'y-axis-grid',
      axis: 'y'
    }),
    Chartist.plugins.tooltip(),
    Chartist.plugins.ctTrendline(trendLine) // 트렌드 라인 추가
  ]
};

위 예시에서는 트렌드 라인의 값을 6으로 설정하고, className으로 trend-line을 지정했습니다. 또한, 점선을 표시하기 위해 strokeDasharray를 '3'로 설정했습니다.

4. 스타일링하기

추가한 트렌드 라인의 스타일을 변경하고 싶다면 CSS를 사용하여 스타일링할 수 있습니다. 예를 들어, trend-line 클래스에 대한 스타일을 변경할 수 있습니다.

.trend-line {
  stroke: #ff0000; /* 빨간색으로 변경 */
  stroke-width: 2px;
}

이제 Chartist를 사용하여 차트에 트렌드 라인을 추가하는 방법에 대해 알아보았습니다. Chartist는 다양한 플러그인을 제공하여 더 많은 기능을 추가할 수 있습니다. 이 문서에서는 트렌드 라인을 예시로 다루었지만, Chartist의 다른 플러그인도 한번 살펴보세요.

참고: Chartist 공식 사이트

© 2018 Colin. All rights reserved.