SVG 그래프(차트) 만들기 (polyline)

 

빨강색으로 차트를 그려보았습니다

svg

여기에서 svg 태그는 현재 차트의 크기를 설정할 수 있습니다 

viewBox 속성은 값으로 min-x, min-y, width, height숫자 배열 값을 전달 받습니다.

현재 min-x는 0, min-y는 0, width는 500, height는 100입니다

 

polyline

• fill속성 - 도형의 안쪽을 색깔을 채울수 있습니다
• stroke 속성 - 도형의 선 색상을 지정할수 있습니다
• points - 도형에 점을 찍습니다  (x좌표, y좌표)

 

현재 points는 00, 100 으로 시작하고 500,100으로 끝납니다

00, 100의  00은 맨왼쪽을 의미하고 100은 바닥을 의미합니다

같은 것을 선으로 표시해보면 이런식의 도형이 그려집니다

여기에서 알 수 있는것은 fill속성을 이용하면 

points의 첫부분과 points의 끝부분을 따로 이어주지 않아도 자동으로 위의 모양처럼 자동으로 색이 칠해진다는 것입니다

 

 

그러면 js로 배열 데이터를 읽어서 그려봅시다

아마 이런식이 될것 같네요

 

polyline은 직선모양의 도형만 그릴 수 있어서 차트로는 잘 사용되지 않는 것 같습니다

다음으로는 베지어 곡선에 대해서 알아보겠습니다