2011-10-03 6 views
0

저는 원형 차트와 같은 다른 색상 섹션으로 슬라이스 될 휠을 만들려고합니다.하지만 테두리 위에 테두리가 엇갈린 테두리와 같은 추가 요소가있을 수 있습니다. 등의 측면 각의 가장자리에 아이콘,css3 도형 호환성

그래서 제 질문은 그냥 CSS3 (예 : http://www.css3shapes.com/) 사용합니까이다 을 다음 인터넷 익스플로러 6-9에 대한 http://css3pie.com/ 같은 것을 사용합니까?

아니면 그냥 포토샵에서 그것을하고 배경 이미지로 div에 두드리는 것이 더 낫지 않습니까? 그리고 여분의 요소에 대해 절대 위치 지정을 사용합니까?

가장 좋은 방법은 무엇입니까?

답변

1

도형 그리기에는 CSS를 사용하지 않을 것입니다. 기껏해야 해키인데 정말 엉망이 될 수 있습니다. 링크 된 cssshapes 사이트의 예제 중 상당수는 Firefox 3.6에서 작동하지 않습니다. - 여전히 많이 사용되는 오래된 브라우저는 물론이고 IE에서는 정말 어려움을 겪었습니다. css3pie는 원형 차트에 필요한 미세한 제어 기능을 제공하지 않습니다.

클라이언트 측에서 브라우저를 사용하여 물건을 그리려면 CSS 모양과 같은 해킹을 사용하지 않고 여러 가지 방법이 있습니다.

SVG와 Canvas는 브라우저에서 그래픽을 배치하고 조작하는 비교적 새로운 기술입니다. SVG는 벡터 그래픽을 그립니다. Canvas는 픽셀 기반 그래픽 용입니다.

두 가지 모두 다양한 브라우저에서 지원됩니다. IE8 및 그 이전의 명백한 예외. 그러나 IE는 VML이라는 대체 그래픽 형식을 지원하며 SVG와 Canvas를 모두 VML로 변환 할 수있는 IE 용 javascript 도구가 있으므로이 도구 중 하나를 사용하면 IE에서이 도구를 사용하여 작업 할 수 있습니다. SVG와 Canvas 모두 효과적으로 브라우저 간 호환이 가능합니다.

하지만 원형 차트 나 비슷한 종류의 그림을 그리는 경우 Raphael 라이브러리를 사용하는 것이 좋습니다. 이것은 모든 브라우저에서 작동하는 자바 스크립트 라이브러리로, 그래프와 차트 (심지어 separate graphing add-on library이 있습니다.)가 무엇인지보고 싶다면이 두 사이트의 데모를 참조하십시오. 당신은 감동 할 것이다. (나는 확실히했다)

희망하는 데 도움이. 내가 제안하고 있었다 정확히 무엇에 대한

2

필자는 PHP의 GD 확장을 사용하여 입력 데이터를 기반으로 파이 차트를 만들고, 생성 된 이미지를 저장하며, 옵션으로 이미지 맵을 생성하여 차트의 일부를 강조 표시하거나 툴팁 등을 표시 할 수 있습니다.

+0

+1. –

+0

파이 차트, 또는 통계, 그것의 한 부분으로 생각하지 그 디자인의 경우, 서로 다른 페이지를 나타내는 원의 다른 섹션이있는 회전 휠이됩니다. [피자 모양처럼] – Neo

+0

그래, 그런 경우에는 배경 이미지 + 이미지 맵 솔루션으로 가고 싶을 수도 있습니다. 오해. –