[javascript] Raphaël을 사용하여 웹 페이지에 표시되는 그래프 데이터를 동적으로 변경하는 방법은 어떻게 되나요?

29 Nov 2023

javascript

Raphaël을 사용하여 웹 페이지에 표시되는 그래프 데이터를 동적으로 변경하는 방법에 대해 알아보겠습니다.

데이터 준비: 먼저 그래프에 표시할 데이터를 준비해야 합니다. 이 예제에서는 단순히 배열로 데이터를 관리합니다.

var data = [10, 20, 30, 40, 50];

Raphaël로 그래프 생성: Raphaël 라이브러리를 사용하여 그래프를 생성합니다. 이 예제에서는 바 형태의 그래프를 생성합니다.

var paper = Raphael("graph-container", 400, 300);
var barWidth = 40;
var spacing = 10;
var startX = 20;
var startY = 280;

for(var i = 0; i < data.length; i++) {
  var barHeight = data[i];
  var x = startX + (barWidth + spacing) * i;
  var y = startY - barHeight;
  var rect = paper.rect(x, y, barWidth, barHeight);
  rect.attr("fill", "#f00");
}

데이터 변경: 그래프의 데이터를 동적으로 변경하려면 데이터를 업데이트하고, 그래프를 다시 그려야 합니다. 이 예제에서는 버튼 클릭 이벤트 처리 함수에서 데이터를 변경하고, updateGraph() 함수를 호출하여 그래프를 다시 그리도록 합니다.

function updateGraph() {
  // 데이터 업데이트
  data = [30, 50, 20, 60, 40];

  // 그래프 다시 그리기
  paper.clear();
  for(var i = 0; i < data.length; i++) {
    var barHeight = data[i];
    var x = startX + (barWidth + spacing) * i;
    var y = startY - barHeight;
    var rect = paper.rect(x, y, barWidth, barHeight);
    rect.attr("fill", "#f00");
  }
}

document.getElementById("update-button").addEventListener("click", updateGraph);

결과 확인: HTML에서 그래프를 표시할 <div> 요소를 생성하고, 변경 버튼을 추가합니다.

<div id="graph-container"></div>
<button id="update-button">데이터 변경</button>

위 코드를 HTML 파일에 추가하면, 페이지에 그래프와 데이터 변경 버튼이 표시됩니다. 버튼을 클릭하여 데이터를 변경하면, 그래프가 새로 그려집니다.

Raphaël을 사용하면 간단한 자바스크립트 코드로 동적인 그래프를 생성하고 데이터를 업데이트할 수 있습니다. 이를 통해 웹 페이지에서 사용자와 상호작용하는 그래프를 구현할 수 있습니다.

참고 문서: