코딩 스쿨 JavaScript

언어선택 : HTMLㅣ CSSㅣ JAVAㅣ JAVASCRIPTㅣ MYSQLㅣ SQLㅣ PHP
▶ JavaScript Graphics
JavaScript Graphics
JavaScript Canvas
JavaScript Plotly
JavaScript Chart-JavaScript
JavaScript Google Chart
JavaScript D3.JavaScript

JavaScript Chart-JavaScript

JavaScript Chart: 데이터 시각화를 위한 다양한 방법

JavaScript Chart는 데이터를 시각적으로 표현하는 데 사용되는 다양한 라이브러리와 도구를 포괄합니다. 이를 통해 복잡한 데이터를 그래픽 형태로 변환하여 사용자가 쉽게 이해할 수 있도록 도와줍니다. 이 가이드는 JavaScript를 사용하여 차트를 생성하는 방법과 관련된 여러 라이브러리와 예제를 소개합니다.

1. JavaScript Chart 라이브러리

JavaScript로 차트를 생성할 수 있는 여러 라이브러리가 있습니다. 이 중 가장 인기 있는 라이브러리는 다음과 같습니다:

  • Chart.js: 간단하고 사용하기 쉬운 API를 제공하는 라이브러리로, 다양한 유형의 차트를 지원합니다.
  • D3.js: 데이터를 바탕으로 복잡한 그래픽을 만드는 데 강력한 기능을 제공하는 라이브러리입니다.
  • Google Charts: Google에서 제공하는 차트 라이브러리로, 간편한 API와 다양한 차트 유형을 지원합니다.
  • Plotly.js: 인터랙티브한 차트를 생성하는 데 특화된 라이브러리로, 고급 데이터 시각화에 적합합니다.

2. Chart.js 사용하기

2.1. Chart.js 소개

Chart.js는 간단하고 가벼운 JavaScript 차트 라이브러리로, 다양한 유형의 차트를 쉽게 생성할 수 있습니다.

2.2. Chart.js 설치하기

Chart.js를 HTML 문서에 포함하는 방법은 다음과 같습니다.

<script src="<https://cdn.jsdelivr.net/npm/chart.js>"></script>

2.3. 기본 사용법

다음은 Chart.js를 사용하여 기본 막대 차트를 만드는 예제입니다.

2.3.1. HTML 코드

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Chart.js Example</title>
    <script src="<https://cdn.jsdelivr.net/npm/chart.js>"></script>
</head>
<body>
    <canvas id="myChart" width="400" height="200"></canvas>
    <script src="script.js"></script>
</body>
</html>

2.3.2. JavaScript 코드 (script.js)

const ctx = document.getElementById('myChart').getContext('2d');
const myChart = new Chart(ctx, {
    type: 'bar', // 차트 유형
    data: {
        labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'], // x축 레이블
        datasets: [{
            label: '# of Votes', // 데이터셋 라벨
            data: [12, 19, 3, 5, 2, 3], // y축 데이터
            backgroundColor: [ // 데이터의 배경 색상
                'rgba(255, 99, 132, 0.2)',
                'rgba(54, 162, 235, 0.2)',
                'rgba(255, 206, 86, 0.2)',
                'rgba(75, 192, 192, 0.2)',
                'rgba(153, 102, 255, 0.2)',
                'rgba(255, 159, 64, 0.2)'
            ],
            borderColor: [ // 데이터의 테두리 색상
                'rgba(255, 99, 132, 1)',
                'rgba(54, 162, 235, 1)',
                'rgba(255, 206, 86, 1)',
                'rgba(75, 192, 192, 1)',
                'rgba(153, 102, 255, 1)',
                'rgba(255, 159, 64, 1)'
            ],
            borderWidth: 1 // 테두리 두께
        }]
    },
    options: {
        scales: {
            y: {
                beginAtZero: true // y축 0부터 시작
            }
        }
    }
});

3. D3.js 사용하기

3.1. D3.js 소개

D3.js는 데이터를 기반으로 복잡한 시각화를 생성하는 데 사용되는 JavaScript 라이브러리입니다. D3.js는 DOM 조작과 데이터 결합을 통해 동적인 그래픽을 만들 수 있습니다.

3.2. D3.js 설치하기

D3.js를 HTML 문서에 포함하는 방법은 다음과 같습니다.

<script src="<https://d3js.org/d3.v7.min.js>"></script>

3.3. D3.js 예제

아래는 D3.js를 사용하여 기본 막대 차트를 만드는 예제입니다.

3.3.1. HTML 코드

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>D3.js Example</title>
    <script src="<https://d3js.org/d3.v7.min.js>"></script>
</head>
<body>
    <svg width="400" height="200"></svg>
    <script src="script.js"></script>
</body>
</html>

3.3.2. JavaScript 코드 (script.js)

const data = [12, 19, 3, 5, 2, 3];

const svg = d3.select('svg');

const barHeight = 20; // 막대 높이

const bar = svg.selectAll('g')
    .data(data)
    .enter().append('g')
    .attr('transform', (d, i) => `translate(0, ${i * barHeight})`);

bar.append('rect')
    .attr('width', d => d * 10) // 데이터 값에 비례하여 너비 설정
    .attr('height', barHeight - 1)
    .attr('fill', 'blue');

bar.append('text')
    .attr('x', d => d * 10 - 3) // 텍스트 위치 조정
    .attr('y', barHeight / 2)
    .attr('dy', '.35em')
    .text(d => d); // 데이터 값을 텍스트로 표시

4. Google Charts 사용하기

4.1. Google Charts 소개

Google Charts는 다양한 차트를 생성할 수 있는 Google에서 제공하는 데이터 시각화 도구입니다. 간단한 API로 다양한 유형의 차트를 만들 수 있습니다.

4.2. Google Charts 설치하기

Google Charts를 사용하기 위해 HTML 문서에 다음과 같은 스크립트를 포함합니다.

<script type="text/javascript" src="<https://www.gstatic.com/charts/loader.js>"></script>

4.3. Google Charts 예제

다음은 Google Charts를 사용하여 간단한 파이 차트를 만드는 예제입니다.

4.3.1. HTML 코드

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Google Charts Example</title>
    <script type="text/javascript" src="<https://www.gstatic.com/charts/loader.js>"></script>
</head>
<body>
    <div id="piechart" style="width: 900px; height: 500px;"></div>
    <script src="script.js"></script>
</body>
</html>

4.3.2. JavaScript 코드 (script.js)

google.charts.load('current', { packages: ['corechart'] });
google.charts.setOnLoadCallback(drawChart);

function drawChart() {
    const data = google.visualization.arrayToDataTable([
        ['Task', 'Hours per Day'],
        ['Work', 11],
        ['Eat', 2],
        ['Commute', 2],
        ['Watch TV', 2],
        ['Sleep', 7]
    ]);

    const options = {
        title: 'My Daily Activities'
    };

    const chart = new google.visualization.PieChart(document.getElementById('piechart'));
    chart.draw(data, options);
}

5. Plotly.js 사용하기

5.1. Plotly.js 소개

Plotly.js는 고급 데이터 시각화를 지원하는 JavaScript 라이브러리로, 인터랙티브한 차트를 만들 수 있습니다.

5.2. Plotly.js 설치하기

Plotly.js를 사용하기 위해 다음과 같은 스크립트를 HTML 문서에 포함합니다.

<script src="<https://cdn.plot.ly/plotly-latest.min.js>"></script>

5.3. Plotly.js 예제

다음은 Plotly.js를 사용하여 간단한 선 그래프를 만드는 예제입니다.

5.3.1. HTML 코드

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial

-scale=1.0">
    <title>Plotly Example</title>
    <script src="<https://cdn.plot.ly/plotly-latest.min.js>"></script>
</head>
<body>
    <div id="lineChart" style="width: 900px; height: 500px;"></div>
    <script src="script.js"></script>
</body>
</html>

5.3.2. JavaScript 코드 (script.js)

const data = [{
    x: [1, 2, 3, 4, 5],
    y: [2, 3, 5, 1, 4],
    mode: 'lines+markers',
    type: 'scatter',
    name: 'Data Points'
}];

const layout = {
    title: 'Simple Line Chart',
    xaxis: {
        title: 'X Axis'
    },
    yaxis: {
        title: 'Y Axis'
    }
};

Plotly.newPlot('lineChart', data, layout);

6. 요약

JavaScript Chart는 데이터를 시각화하는 데 매우 유용한 도구입니다. 여러 라이브러리를 통해 다양한 차트를 쉽게 생성할 수 있습니다.

  • Chart.js: 간단한 API로 다양한 유형의 차트를 지원.
  • D3.js: 복잡한 시각화를 위한 데이터 기반 도구.
  • Google Charts: 간편한 데이터 시각화를 위한 Google 제공 라이브러리.
  • Plotly.js: 인터랙티브한 데이터 시각화 지원.

각 라이브러리를 활용하여 데이터를 시각적으로 표현하고 사용자에게 더 나은 통찰력을 제공할 수 있습니다.

copyright ⓒ 스타트코딩 all rights reserved.
이메일 : startcodingim@gamil.com