// Raphaël 라이브러리를 로드합니다.
<script src="https://cdnjs.cloudflare.com/ajax/libs/raphael/2.3.0/raphael.min.js"></script>

// 바 차트 영역의 너비와 높이를 설정합니다.
var chartWidth = 400;
var chartHeight = 300;

// 바 차트를 표시할 위치를 설정합니다.
var chartContainer = document.getElementById('chart-container');

// Raphaël로 바 차트를 생성합니다.
var paper = Raphael(chartContainer, chartWidth, chartHeight);

// 바 차트의 데이터를 정의합니다.
var data = [12, 9, 7, 15, 10];

// 바 차트의 X축 라벨을 정의합니다.
var labels = ['A', 'B', 'C', 'D', 'E'];

// 바 차트 각 막대의 너비를 계산합니다.
var barWidth = chartWidth / data.length;

// 바 차트를 그립니다.
for (var i = 0; i < data.length; i++) {
  // 각 막대의 높이를 계산합니다.
  var barHeight = (data[i] / Math.max.apply(null, data)) * chartHeight;

  // 각 막대를 그립니다.
  var bar = paper.rect(i * barWidth, chartHeight - barHeight, barWidth, barHeight);
  
  // 각 막대에 마우스 오버 이벤트를 추가합니다.
  bar.mouseover(function() {
    this.attr('fill', 'orange');
  });
  
  // 각 막대에 마우스 아웃 이벤트를 추가합니다.
  bar.mouseout(function() {
    this.attr('fill', '#4C9BE9');
  });

  // 각 막대의 X축 라벨을 그립니다.
  var label = paper.text(i * barWidth + (barWidth / 2), chartHeight + 10, labels[i]);
}