[javascript] Raphaël을 사용하여 다중 라인 차트를 그리는 방법은 어떻게 되나요?

29 Nov 2023

javascript

안녕하세요! Raphaël은 JavaScript로 벡터 기반 그래픽을 그리는 데 사용되는 라이브러리입니다. Raphaël을 사용하여 다중 라인 차트를 그리는 방법에 대해 알려드리겠습니다.

먼저, Raphaël을 다운로드하고 HTML 문서에 포함시킵니다. 다음은 Raphaël을 사용하여 다중 라인 차트를 그리는 간단한 예제 코드입니다:

// Raphaël을 초기화합니다.
var paper = Raphael("chart-container", 500, 400);

// 데이터를 정의합니다.
var data = [
  [10, 20, 30, 40],
  [15, 25, 35, 45],
  [25, 35, 45, 55]
];

// 라인 차트의 X, Y 축 범위를 설정합니다.
var xStart = 50;
var xEnd = 450;
var yStart = 350;
var yEnd = 50;

// X, Y 축을 그립니다.
paper.path("M" + xStart + "," + yStart + "L" + xEnd + "," + yStart);
paper.path("M" + xStart + "," + yStart + "L" + xStart + "," + yEnd);

// 각각의 데이터 시리즈를 그려줍니다.
for (var i = 0; i < data.length; i++) {
  var pathString = "M";
  
  for (var j = 0; j < data[i].length; j++) {
    var x = xStart + ((xEnd - xStart) / (data[i].length - 1)) * j;
    var y = yStart - ((yStart - yEnd) / (Math.max(...data.flat()) - Math.min(...data.flat()))) * (data[i][j] - Math.min(...data.flat()));
    
    pathString += x + "," + y + " ";
  }
  
  paper.path(pathString).attr("stroke", "blue").attr("stroke-width", 2).attr("fill", "none");
}

위의 코드에서는 먼저 Raphaël을 초기화하고, 데이터를 정의한 후 X, Y 축을 그렸습니다. 그런 다음, 데이터를 기반으로 각 데이터 시리즈에 대한 라인 차트를 그렸습니다.

라인 그래프의 X축은 50부터 450까지, Y축은 350부터 50까지로 설정했습니다. X, Y 좌표를 계산하기 위해 데이터의 값과 최대값, 최소값을 사용했습니다. 각 데이터의 점은 X, Y 좌표로 그려져 라인 차트를 형성합니다.

라인 차트를 그린 후 효과를 추가하려면 Raphaël의 다양한 메소드와 속성을 사용하여 차트를 사용자 정의할 수 있습니다. 많은 옵션과 기능을 제공하기 때문에 필요에 맞게 사용할 수 있습니다.

더 자세한 정보와 Raphaël의 다른 예제에 대해서는 Raphaël 공식 문서를 참조하시기 바랍니다.

참고 문헌:

Raphaël 공식 문서