자바스크립트에서 Ternary 연산자를 활용한 도표 생성

08 Nov 2023

javascript

자바스크립트에서 Ternary 연산자는 조건문을 간결하게 표현할 수 있는 강력한 도구입니다. 이번 블로그 포스트에서는 Ternary 연산자를 활용하여 도표를 생성하는 방법에 대해 알아보겠습니다.

도표 생성하기

우선, 도표를 생성하기 위해 HTML과 CSS를 사용할 겁니다. 다음은 도표를 생성할 기본적인 HTML 구조입니다.

<div id="chart"></div>

이제 자바스크립트 코드를 사용하여 도표를 동적으로 생성해보겠습니다. 기본 도표 모양에 대한 스타일링은 CSS를 통해 처리하도록 하겠습니다.

// 도표 데이터
const chartData = [
  { label: 'A', value: 10 },
  { label: 'B', value: 20 },
  { label: 'C', value: 15 },
  { label: 'D', value: 25 },
];

// 도표 생성 함수
const createChart = (data) => {
  const chartContainer = document.getElementById('chart');

  // 도표 요소 생성
  data.forEach(item => {
    const chartItem = document.createElement('div');
    chartItem.classList.add('chart-item');
    chartItem.style.width = `${item.value * 10}px`;
    chartItem.innerHTML = `${item.label} (${item.value})`;

    // 도표 컨테이너에 추가
    chartContainer.appendChild(chartItem);
  });
};

// 도표 생성 호출
createChart(chartData);

위 자바스크립트 코드는 chartData 변수를 통해 도표 데이터를 정의하고, createChart 함수를 통해 도표를 동적으로 생성합니다. 각 항목의 값에 따라 도표의 너비를 결정하고, 레이블과 값의 조합을 도표 아이템에 표시합니다.

Ternary 연산자로 도표 스타일링하기

이제 Ternary 연산자를 활용하여 도표의 스타일을 동적으로 변화시켜보겠습니다. 예를 들어, 값이 20 이상인 경우 도표 아이템의 배경색을 초록으로 설정하고, 그렇지 않은 경우 회색으로 설정하도록 해봅시다.

// 도표 생성 함수 수정
const createChart = (data) => {
  const chartContainer = document.getElementById('chart');

  data.forEach(item => {
    const chartItem = document.createElement('div');
    chartItem.classList.add('chart-item');
    chartItem.style.width = `${item.value * 10}px`;
    // Ternary 연산자를 사용하여 배경색 설정
    chartItem.style.backgroundColor = item.value >= 20 ? 'green' : 'gray';
    chartItem.innerHTML = `${item.label} (${item.value})`;

    chartContainer.appendChild(chartItem);
  });
};

// 도표 생성 호출
createChart(chartData);

위 코드에서 Ternary 연산자를 사용하여 item.value 가 20 이상인 경우 배경색을 초록색으로 설정하고, 그렇지 않은 경우 회색으로 설정합니다. 이렇게 하면 도표의 스타일이 값에 따라 동적으로 변화하게 됩니다.

결론

자바스크립트에서 Ternary 연산자를 활용하여 도표를 생성하고 스타일링하는 방법에 대해 알아보았습니다. Ternary 연산자는 조건문을 간결하게 표현할 수 있어 코드를 간결하고 가독성있게 작성할 수 있는 장점이 있습니다. 이를 활용하여 복잡한 도표나 UI 요소를 동적으로 제어할 수 있습니다. 참고로, 해당 코드는 간략한 예시로 실제 프로젝트에서는 보다 다양한 조건과 로직을 포함하여 활용할 수 있습니다.

#javascript #ternary