[JavaScript] Chart.js 차트 구현하기 (사용자가 input칸에 연도 year를 입력했을 때 차트 색 변하는 효과 구현하기) (증감률 계산 함수 구현, 숫자만 입력 가능)

728x90

프로그래밍 세계를 탐구합시다.

Chart.js 차트 구현하기, 증감률 계산 함수 구현하기

JavaScript의 Chart.js를 활용하여 웹페이지에 차트를 출력할 수 있습니다.

구현 화면

저는 이번 프로젝트에서 사용자가 연도를 입력하면 증감률을 계산해 출력하고,

차트의 해당 연도 그래프에 색이 변하는 효과를 적용하고 싶었습니다.

이를 구현하기 위해 powerprice.html에서 사용자가 원하는 year를 입력 받고,

powerprice.js에서 함수를 이용해 값을 계산한 후 updateChart(year)를 요청하고,

pChart.js에서 year값을 받아 차트의 색을 업데이트하는 코드를 작성했습니다.

값이 나올 때 그래프가 아래로 내려가는 문제가 생겼는데, css에서 min-height를 3rem 설정하여 공간을 배정하여 해결했습니다.

작성 코드

처음 작성했을 때, 모든 차트.js코드에 데이터를 입력해서 출력했습니다.

그렇게 코드를 작성한 결과 중복된 데이터를 여러 개의 파일에 반복하여 입력하는 문제가 생겼습니다.

그래서 데이터.js 파일을 따로 만든 후 export const를 사용해서 내보내기하고,

import를 사용해서 데이터를 가져오는 방식으로 데이터 중복 문제를 해결했습니다.

powerprice.html

차트가 나타나는 코드

<body>

<div style="
        width: 60vw;
        height: 60vh;
        display: flex;
        justify-content: center;
        align-items: center;
        margin-top: 3rem;
      ">
  <!--차트가 그려질 부분-->
  <canvas id="priceChart"></canvas>
</div>

</body>

사용자가 연도를 입력하고 입력 버튼을 클릭하는 코드

숫자만 입력 가능하도록 지정하는 방법

처음에는 input type을 text로 지정했습니다.

그랬더니 사용자가 한글이나 영어 텍스트 또한 입력할 수 있었습니다.

정규식을 사용하는 방법도 있으나, 저는 input type을 number로 바꾸는 방식으로 이 문제를 해결했습니다.

그 결과, 숫자 외에는 문자가 작성되지 않습니다.

<body>
  <div id="powerprice-container">
    <div id="input-container">
      <input type="number" id="powerprice-yearInput" min="0" placeholder="1955년~2070년 사이의 연도만 입력하실 수 있습니다." />
      <select class="year-dropdown" id="year-dropdown" onchange="updateYearInput()">
        <script>
          for (let i = 1955; i <= 2070; i++) {
            document.write('<option value="' + i + '">' + i + '</option>');
          }
        </script>
      </select>
      <button onclick="getPowerPrice()">확인</button>
    </div>
    <p id="powerprice-result"></p> <!-- 여기에 결과를 표시합니다. -->
  </div>
</body>

powerPriceData.js

1955~2022년의 데이터는 실제 데이터입니다.

2023~2070년의 데이터는 Python의 scikit-learn 라이브러리를 사용하여

선형회귀(Linear Regression) 방식으로 예측한 후 수치화하였습니다.

export const를 통해 데이터를 내보냈습니다.

(실제로는 1955~2070년의 데이터가 입력되어 있습니다.)

export const powerPriceData = {
    1955: 3,
    1956: 3,
};

powerprice.js

import를 통해 데이터를 불러왔습니다.

2022년의 데이터와 사용자가 입력한 연도의 데이터를 비교하여 전기 단가 증감률을 계산하는 함수입니다.

사용자가 입력 버튼, Enter 키 어떤 것을 누르더라도 값이 나오도록 설정했습니다.

import { powerPriceData } from './powerPriceData.js';

window.updateYearInput = function () {
  var yearInput = document.getElementById("powerprice-yearInput");
  var yearDropdown = document.getElementById("year-dropdown");

  // 선택한 연도를 입력 창에 설정
  yearInput.value = yearDropdown.value;
}

window.onload = function () {
  document.getElementById("powerprice-yearInput")
    .addEventListener("keydown", window.handleKeyPress);
};

window.handleKeyPress = function (event) {
  // 엔터 키를 눌렀을 때
  if (event.key === "Enter") {
    getPowerPrice();
  }
}

window.toggleYearDropdown = function () {
  var yearDropdown = document.getElementById("year-dropdown");

  // 토글 로직만 수행
  yearDropdown.style.display =
    yearDropdown.style.display === "none" ? "block" : "none";
}

window.getPowerPrice = function () {
  let year = document.getElementById("powerprice-yearInput").value;

  // 빈 칸 체크
  if (year.trim() === "") {
    document.getElementById("powerprice-result").innerText = "연도를 입력해 주세요.";
    return;
  }


  let price = powerPriceData[year];

  if (price === undefined) {
    document.getElementById("powerprice-result").innerText =
      year + "년의 데이터는 아직 준비되지 않았습니다.";
  } else {
    let baseYear = 2022;
    let basePrice = powerPriceData[baseYear];
    let increaseRate = (((price - basePrice) / basePrice) * 100).toFixed(2);

    if (year >= 1955 && year <= 2022) {
      let priceComparison =
        increaseRate > 0 ? "높은 가격입니다." : "낮은 가격입니다.";

      document.getElementById("powerprice-result").innerText =
        year +
        "년의 전기 단가는 " +
        price +
        " kWh/명으로, " +
        baseYear +
        "년 대비 " +
        Math.abs(increaseRate) +
        "% " +
        priceComparison;
    } else {
      document.getElementById("powerprice-result").innerText =
        year +
        "년의 예상 전기 단가는 " +
        price +
        " kWh/명으로, " +
        baseYear +
        "년 대비 " +
        increaseRate +
        "% 상승합니다.";
    }
    updateChart(year);
  }
}

pChart.js

import를 통해 데이터를 불러왔습니다.

window.updateChart부터는 사용자가 입력한 year값을 가져오는 코드입니다.

// pChart.js
import { powerPriceData } from './powerPriceData.js';

const priceChartData = {
  labels: Object.keys(powerPriceData),
  datasets: [
    {
      label: "전력 단가 (kWh/원)",
      data: Object.values(powerPriceData),
      backgroundColor: Object.keys(powerPriceData).map(() => "rgba(0, 0, 0, 0.07)"), // 기본 색상으로 배열 채우기
      borderColor: "rgba(206, 41, 91, 0.624)", // 막대 테두리 색상 설정
      borderWidth: 1,
    },
  ],
};

const config = {
  type: "bar",
  data: priceChartData, // 'powerPriceData'를 'priceChartData'로 변경
  options: {
    responsive: true,
    scales: {
      x: {
        type: "linear",
        position: "bottom",
      },
      y: {
        beginAtZero: true,
      },
    },
    plugins: {
      legend: {
        display: true,
        position: "top",
      },
      title: {
        display: true,
        text: "전력 가격 그래프",
      },

    },
  },
};

// Canvas 요소 가져오기
const ctx = document.getElementById("priceChart").getContext("2d");

// Chart 생성
const priceChart = new Chart(ctx, config);

window.updateChart = function (year) {
  let color;
  if (year < 2022) {
    color = "red";
  } else if (year < 2040) {
    color = "blue";
  } else {
    color = "green";
  }

  let price = powerPriceData[year];
  if (price === undefined) {
    alert(year + "년도의 데이터는 아직 준비되지 않았습니다.");
  } else {
    // 현재 연도가 labels 배열에 있는 위치를 찾습니다.
    let index = priceChart.data.labels.indexOf(year.toString());
    if (index === -1) {
      // 연도가 아직 labels 배열에 없다면, 연도와 데이터, 색상을 추가합니다.
      priceChart.data.labels.push(year.toString());
      priceChart.data.datasets[0].data.push(price);
      priceChart.data.datasets[0].backgroundColor.push(color);
    } else {
      // 연도가 이미 labels 배열에 있다면, 해당 위치의 데이터와 색상만 변경합니다.
      priceChart.data.datasets[0].data[index] = price;
      priceChart.data.datasets[0].backgroundColor[index] = color;
    }
    priceChart.update();
  }
}

구현 화면을 더 상세히 확인하고 싶다면 아래 사이트 참고 바랍니다.

https://ityrannosaurus.github.io/power/

내일의 전기세

scikit-learn 라이브러리를 사용하여 선형회귀(Linear Regression) 방식으로 예측을 수행했습니다. 실제 데이터를 바탕으로 2070년까지의 예측값을 출력했습니다.

ityrannosaurus.github.io

728x90

저작자표시 비영리 변경금지

'IT > JavaScript' 카테고리의 다른 글

[CSS] 미디어쿼리 Media Query 적용하기 (사이즈 분기점 기준 px, 테스트 방법) (1)	2024.01.07
[CSS] 버튼 CSS 효과 (입력 input 칸, 드롭다운 dropdown 메뉴 꾸미기) (2)	2024.01.06
[CSS] 이미지 스크롤 고정 효과 (페이지 스크롤 시 이미지 고정, background-attatchment) (3)	2024.01.05

🦖 ITyranno 아이티라노

[JavaScript] Chart.js 차트 구현하기 (사용자가 input칸에 연도 year를 입력했을 때 차트 색 변하는 효과 구현하기) (증감률 계산 함수 구현, 숫자만 입력 가능)

Chart.js 차트 구현하기, 증감률 계산 함수 구현하기

구현 화면

작성 코드

'IT > JavaScript' 카테고리의 다른 글

티스토리툴바

[JavaScript] Chart.js 차트 구현하기 (사용자가 input칸에 연도 year를 입력했을 때 차트 색 변하는 효과 구현하기) (증감률 계산 함수 구현, 숫자만 입력 가능)

Chart.js 차트 구현하기, 증감률 계산 함수 구현하기

구현 화면

작성 코드

'IT > JavaScript' 카테고리의 다른 글

관련글

티스토리툴바