시작하기

이것은 블록을 즉시 생성하는 데 사용할 수 있는 준비된 코드입니다. 이것은 Chart.js의 기초입니다. 시작하려면 이것을 준비하세요.

Chart JS에서 차트를 그리는 데 config, render 및 setup 블록을 사용하는 방법을 알아보겠습니다.

Chart JS 시작하기

아래 코드를 복사하면 즉시 차트가 생성됩니다.

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Getting Started with Chart JS with www.chartjs3.com</title>
    <style>
      * {
        margin: 0;
        padding: 0;
        font-family: sans-serif;
      }
      .chartMenu {
        width: 100vw;
        height: 40px;
        background: #1A1A1A;
        color: rgba(54, 162, 235, 1);
      }
      .chartMenu p {
        padding: 10px;
        font-size: 20px;
      }
      .chartCard {
        width: 100vw;
        height: calc(100vh - 40px);
        background: rgba(54, 162, 235, 0.2);
        display: flex;
        align-items: center;
        justify-content: center;
      }
      .chartBox {
        width: 700px;
        padding: 20px;
        border-radius: 20px;
        border: solid 3px rgba(54, 162, 235, 1);
        background: white;
      }
    </style>
  </head>
  <body>
    <div class="chartMenu">
      <p>WWW.CHARTJS3.COM (Chart JS <span id="chartVersion"></span>)</p>
    </div>
    <div class="chartCard">
      <div class="chartBox">
        <canvas id="myChart"></canvas>
      </div>
    </div>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/chart.js/dist/chart.umd.min.js"></script>
    <script>
    // setup 
    const data = {
      labels: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
      datasets: [{
        label: 'Weekly Sales',
        data: [18, 12, 6, 9, 12, 3, 9],
        backgroundColor: [
          'rgba(255, 26, 104, 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)',
          'rgba(0, 0, 0, 0.2)'
        ],
        borderColor: [
          'rgba(255, 26, 104, 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)',
          'rgba(0, 0, 0, 1)'
        ],
        borderWidth: 1
      }]
    };

    // config 
    const config = {
      type: 'bar',
      data,
      options: {
        scales: {
          y: {
            beginAtZero: true
          }
        }
      }
    };

    // render init block
    const myChart = new Chart(
      document.getElementById('myChart'),
      config
    );

    // Instantly assign Chart.js version
    const chartVersion = document.getElementById('chartVersion');
    chartVersion.innerText = Chart.version;
    </script>

  </body>
</html>

Chart JS 블록

Chart JS 문서는 블록 방식으로 이동하고 있습니다. 기본적으로 3개의 블록이 있습니다. 이것들은 설정 또는 데이터 블록, 구성 블록 및 렌더 또는 초기화 블록입니다. 이 3개의 블록은 차트의 기본 구조를 이룹니다.

필요한 경우 더 많은 블록을 추가할 수 있습니다. 추가 블록은 일반적으로 특정 부분이 더 확장되기 시작할 때 추가됩니다.

설정 블록 또는 데이터 블록

설정 블록은 데이터 블록이라고도합니다. 이 블록은 데이터와 관련된 여러 JavaScript 객체를 포함하는 상수 변수 (const)입니다. 이것은 데이터 포인트, 레이블, 배경색, 호버 색상 등과 같은 모든 것이 될 수 있습니다.

이곳에는 차트의 값 또는 데이터 포인트와 관련된 다른 상수 값도 배치할 수 있습니다. 설정 블록 또는 데이터 블록 코드는 다음과 같으며 항상 가장 먼저 로드되어야 합니다. 모든 다른 블록이 데이터 블록에 의존하기 때문입니다.

    // setup 
    const data = {
      labels: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
      datasets: [{
        label: 'Weekly Sales',
        data: [18, 12, 6, 9, 12, 3, 9],
        backgroundColor: [
          'rgba(255, 26, 104, 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)',
          'rgba(0, 0, 0, 0.2)'
        ],
        borderColor: [
          'rgba(255, 26, 104, 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)',
          'rgba(0, 0, 0, 1)'
        ],
        borderWidth: 1
      }]
    };

구성 블록

구성 블록은 차트의 모든 구성 설정을 포함합니다. 구성은 렌더 블록 이전에 배치되어야 합니다. 이 블록은 데이터 블록에 의존하는 경향이 있기 때문입니다 data const 변수에 의존합니다.

세 가지 주요 부분은 차트 유형, 옵션 및 설정 또는 데이터 블록에 연결되는 데이터 변수입니다. 코드에서 "data" 는 ES6 JavaScript 코드를 사용하는 변수입니다.

    // config 
    const config = {
      type: 'bar',
      data,
      options: {
        scales: {
          y: {
            beginAtZero: true
          }
        }
      }
    };

We use “data,” only if we have a object value which is EQUAL to the const variable. If the const and object variable are identical we can do this. This means the upper text is a shorthand.

만약 const가 다른 경우에는 이렇게 전체 코드로 작성해야 합니다. const와 객체 값이 다르다는 것을 보니 코드를 더 상세하게 작성해야 합니다. 아래 내용을 참조하세요.

    // config 
    const config = {
      type: 'bar',
      data: data2,
      options: {
        scales: {
          y: {
            beginAtZero: true
          }
        }
      }
    };

렌더 블록 또는 초기화 블록

만약 const가 다른 경우에는 이렇게 전체 코드로 작성해야 합니다. const와 객체 값이 다르다는 것을 보니 코드를 더 상세하게 작성해야 합니다. 아래 내용을 참조하세요.

    // 렌더 초기화 블록
    const myChart = new Chart(
      document.getElementById('myChart'),
      config
    );

마지막으로 항상 로드되어야 하는 블록은 렌더 또는 초기화 블록입니다. 이 블록은 위의 모든 코드를 기반으로 캔버스에 차트를 그립니다. 다시 말해, 이 블록이 로드되기 전에 모든 블록이 로드되어야 합니다. 그렇지 않으면 오류가 발생할 수 있으며 특정 코드 블록이 제외될 수 있습니다.

이 페이지가 도움이 되었습니까?

2 replies on “Getting Started”

답글 남기기