[javascript] Chartist에서 데이터베이스에 저장된 데이터로 차트 그리기

01 Dec 2023

javascript

Chartist는 JavaScript로 작성된 경량화된 차트 라이브러리입니다. 이 라이브러리를 사용하면 데이터베이스에 저장된 데이터를 기반으로 아름답고 동적인 차트를 그릴 수 있습니다. 다음은 Chartist를 사용하여 데이터베이스에서 데이터를 가져와 차트를 그리는 방법에 대한 예제입니다.

1. Chartist 설치하기

먼저, Chartist를 설치해야 합니다. 아래의 명령어를 사용하여 npm을 통해 Chartist를 설치할 수 있습니다.

npm install chartist --save

2. 데이터베이스에서 데이터 가져오기

데이터베이스에서 데이터를 가져오기 위해서는 먼저 데이터베이스에 연결하고 쿼리를 실행해야 합니다. 데이터베이스에 따라 연결 방법과 쿼리 실행 방법이 다를 수 있습니다. 아래는 MySQL 데이터베이스에서 데이터를 가져오는 예제입니다.

const mysql = require('mysql');

// MySQL 연결 설정
const connection = mysql.createConnection({
  host: 'localhost',
  user: 'username',
  password: 'password',
  database: 'database_name'
});

// 데이터베이스 연결
connection.connect();

// 데이터 쿼리 실행
connection.query('SELECT * FROM chart_data', (error, results, fields) => {
  if (error) throw error;

  // 가져온 데이터로 차트 그리기 함수 호출
  drawChart(results);

  // 연결 종료
  connection.end();
});

// 차트 그리기 함수
function drawChart(data) {
  // Chartist를 사용하여 차트 그리기
  // ...
}

이 예제에서는 MySQL 데이터베이스에 연결하고 chart_data 테이블에서 데이터를 가져와 drawChart 함수를 호출하고 있습니다. 데이터베이스 연결 및 쿼리 실행 방법은 사용하는 데이터베이스에 따라 다를 수 있으므로, 해당 데이터베이스의 문서를 참조하여 작업해야 합니다.

3. Chartist를 사용하여 차트 그리기

마지막으로, Chartist를 사용하여 데이터를 기반으로 차트를 그립니다. 아래는 Chartist를 사용하여 데이터를 기반으로 Line 차트를 그리는 예제입니다.

function drawChart(data) {
  const chartData = {
    labels: data.map(item => item.date),
    series: [
      data.map(item => item.value)
    ]
  };

  new Chartist.Line('.chart-container', chartData);
}

이 예제에서는 new Chartist.Line('.chart-container', chartData)를 사용하여 데이터를 기반으로 Line 차트를 그리고 있습니다. chart-container는 차트를 표시할 HTML 요소의 클래스명입니다. 데이터를 기반으로 다른 차트 유형을 그리기 위해서는 Chartist 문서를 참조하시기 바랍니다.

참고자료

Chartist 공식 문서: https://gionkunz.github.io/chartist-js/
MySQL 공식 문서: https://dev.mysql.com/doc/