[javascript] Chartist에서 SVG 로드 및 편집하기

01 Dec 2023

Chartist는 웹 기반의 시각화 도구로, SVG를 사용하여 다양한 종류의 차트를 생성할 수 있습니다. 이번 블로그 포스트에서는 Chartist를 사용하여 SVG를 로드하고 편집하는 방법에 대해 알아보겠습니다.

1. SVG 로드하기

Chartist에서는 Chartist.Svg 객체를 사용하여 SVG를 로드할 수 있습니다. 아래의 예제 코드를 참고하세요.

var svg = Chartist.Svg("<svg width='400' height='300'><rect x='50' y='50' width='200' height='100' fill='red'/></svg>");

위 코드에서는 <svg> 태그를 문자열로 전달하여 SVG를 생성하고, Chartist.Svg로 해당 SVG를 로드합니다.

로드한 SVG를 편집하기 위해서는 svg 객체의 메서드와 속성을 사용할 수 있습니다. 예를 들어, SVG 요소의 색상을 변경하고 싶다면, fill 속성을 수정해야 합니다. 아래의 예제 코드를 참고하세요.

svg.childNodes[0].setAttribute("fill", "blue");

위 코드에서는 svg 객체의 childNodes 배열을 사용하여 SVG 요소에 접근하고, setAttribute 메서드를 사용하여 fill 속성을 변경합니다. 해당 속성은 색상을 나타내며, 위 예제의 경우에는 파란색(blue)으로 변경되었습니다.

SVG를 편집한 후에는 해당 SVG를 웹 페이지에 표시할 수 있습니다. svg 객체의 container 속성을 사용하여 SVG를 적용하는 것이 가능합니다. 아래의 예제 코드를 참고하세요.

document.getElementById("chart").appendChild(svg.container);

위 코드에서는 chart라는 id를 가진 엘리먼트에 appendChild 메서드를 사용하여 svg.container를 추가합니다. 이렇게 하면 해당 SVG가 웹 페이지에 표시됩니다.

Chartist를 사용하여 SVG를 로드하고 편집하는 방법을 알아보았습니다. 이를 통해 Chartist의 다양한 기능을 활용하여 웹 기반 시각화를 더욱 다양하게 구현할 수 있습니다. 차트와 관련된 기능을 구현할 때는 Chartist를 활용해 보세요!