CSS3로 진행되는 파이 스타일 진행 표시 줄?

Question

CSS3로 파이 스타일 진행 막대를 만드는 방법에 대한 라이브러리 또는 예제가 있습니까?

Answer 1

캔버스 또는 SVG가 CSS보다 적합합니다. (원 세그먼트가 없어서). Raphaël은 SVG로가는 경우 좋은 선택 일 수 있습니다. 세그먼트를 그리는 방법을 보여주는 (non-animated) pie chart입니다.

Answer 2

SVG 기반 그래프의 또 다른 좋은 선택은 d3.js입니다. 그것은 Protovis 라이브러리의 후속이지만 훨씬 더 유연하고 훨씬 더 잘 작성되어 있습니다 (따라서 더 나은 사전 형성). 또한 CSS3를 사용하여 SVG 요소의 일부 속성을 스타일링 할 수 있지만 HTML 스타일을 지정할 수는 없습니다. 그러나 CSS는 여전히 유용하며 일부 속성에서 전환을 사용할 수도 있습니다. W3C의 Styling SVG 문서를 살펴보십시오 (다만 CSS2에 대해 설명합니다).

Answer 3

원형 차트 is possible은 순수한 CSS이지만 애니메이션은 쉽지 않을 수 있습니다.