파이, 바, 선 : 캔버스보다 SVG/VML

Question

"표준"차트 작성을위한 라이브러리 (파이, 라인 및 바)를 선택해야합니다.

내가 읽은 바로는, 예를 들어 Highcharts와 같이 SVG/VML이 가장 좋습니다. SVG는 모든 주요 브라우저에서 표준이되고 있습니다. 이제는 IE 9에서 허용됩니다. Canvas보다 크기 조정 및 내보내기가 더 쉬워 보입니다.

아직도 여러 차트 라이브러리가 Canvas에 의존하고 있습니다. 내가 놓친 게 있니? 그런 응용 프로그램에 대해 SVG보다 Canvas를 고려해야 할 이유가 있습니까?

Answer 1

일반적으로 둘 중 하나를 사용하여 동일한 결과를 얻을 수 있습니다. 둘 다 사용자를 위해 화면에 픽셀을 그려 넣습니다. 주요 차별화 요소는 HTML5 Canvas가 결과 (읽기 및 쓰기)에 대한 픽셀 수준의 제어를 제공하는 반면 SVG는 보유 모드 그래픽 API이므로 자바 스크립트 또는 SMIL을 사용하여 이벤트를 처리하거나 아트웍을 조작하기가 매우 쉽습니다. 애니메이션을 다시 그리며 당신을 돌 보았습니다. 일반적으로

, 당신이 경우 HTML5 캔버스를 사용하는 것이 좋습니다 것 : 효과 이상

• 필요 픽셀 수준의 제어는
• 이 될 것입니다 데이터 포인트의 매우 큰 번호가 (예를 들어 흐리게 또는 blending) (그리고 아마도 패닝)를 한 번 제시하지만,

사용 SVG 달리 정적하는 경우 :

• 화면에 그려지는 복잡한 객체가 이벤트 (예 :
• 이 결과는 높은 해상도에서 잘 독립적으로
• 당신이 원하는 당신의 출력 텍스트를 포함 할 것이다 다양한 그래프 부분의 모양을 애니메이션하기
• 필요성을 인쇄 할) 툴팁을 볼 수있는 데이터 포인트를 통해 이동 검색 엔진에 의해 색인
• 출력 지난 2 년 동안

Answer 2

무거운 조작/애니메이션을 원하거나 10,000 개 이상의 차트가있는 경우가 아니면 캔버스가 필요하지 않습니다. 성능 분석에 대한 자세한 내용 here.

다음을 구분하는 것도 중요합니다. 차트 작성 및 다이어그램 작성은 두 가지 다른 작업입니다. 몇 개의 막 대형 차트를 표시하는 것은 (예를 들어) 10,000 개 이상의 이동 가능하고 링크 가능하며 애니메이션 효과가있는 객체를 사용하여 다이어그램 작성 흐름도와 매우 다릅니다.

모든 SVG 요소는 DOM 요소이므로 10,000 또는 100,000 노드를 DOM에 추가하면 엄청난 속도 저하가 발생합니다. 그러나 캔버스에 많은 요소를 추가하는 것은 전적으로 가능하며 매우 빠를 수 있습니다.

혼란스러운 경우가 있습니다. 제 생각에 RaphaelJS (최고의 차트 SVG 라이브러리)는 단어 캔버스를 사용하지만 HTML <canvas> 요소와 관련이 없습니다.

Answer 3

을 생산하기 위해 XML 및/또는 XSLT를 사용하려면, 내 취향은 내가 주로 파이를 구축하는 상대적으로 작은 데이터 세트를 처리로, SVG를 사용하는 것이 었습니다 , 기둥 형 차트 또는지도.

캔버스에서 내가 발견 한 장점은 toDataURL 덕분에 차트를 이미지로 저장할 수 있다는 것입니다. 나는 svg에 상응하는 것을 찾지 못했고 클라이언트 측의 svg 차트를 저장하는 가장 좋은 방법은 먼저 캔버스 (예 : canvg 사용)로 변환하는 것입니다.