막대 그래프 (JavaScript)에 다차원 배열을 표시 하시겠습니까?

Question

누군가가 막대 그래프 형태로 다차원 배열을 표시하는 방법에 대한 몇 가지 포인터를 줄 수 있습니까?

배열은 다차원이며 각 부분에 3 개의 요소가 있으며 요소는 HTML 형태로 결정됩니다.

따라서 표준 HTML 사이트의 JavaScript의 막대 그래프 형식으로 이러한 종류의 배열을 표시 할 수 있다면 도움을 주셔서 감사합니다!

감사

Answer 1

체크 아웃 플로트 그리고 Milkchart. 전자는 확장됩니다 jQuery, 후자의 mootools. 둘 다 사용합니다 캔버스 이제 모든 주요 브라우저에서 지원되는 요소 (즉, 추가 스크립트를 포함하여조차도). 살펴보십시오 평판 사용중인 STACKOVERFLOW 프로파일의 탭을 사용하십시오. 나는 프로젝트에서 Flot (MilkChart를 시도하지 않았다)을 사용했고 데이터를 전달하는 방식이 처음에는 직관적이지 않은 것처럼 보일 수 있지만 실제로 비 플래시 차트 솔루션에 대해서는 실제로 강력하다는 것을 알 수 있습니다. . Flot은 또한 차트 상호 작용을 정의하는 데 사용할 수있는 사용자 정의 이벤트를 정의합니다. Flot은 플러그인을 사용하여 스택 막대 차트를 지원하며 클러스터링 막대 차트도 수행 할 수 있다고 생각합니다.

항상 어떤 종류의 선언적 그래픽 솔루션을 사용하여 갈 수 있습니다. div 그래프의 막대로 요소가 있지만 캔버스와 함께 도표 차트만큼 브라우저에서 쉽거나 일관되지는 않습니다.

해당 솔루션 중 하나를 사용하는 경우 정적 이미지를 반환하기 위해 데이터를 서비스로 보낼 수 있습니다. 그만큼 Google 차트 API 그룹화 된 막대 차트를 지원하거나 직접 호스팅하는 서비스를 사용할 수 있습니다.

내 권장 사항은 HTML 캔버스를 사용하는 첫 번째 솔루션입니다. 특히 플로트를 활용하는 것은 내가 가장 많은 경험을 가지고 있고 보증 할 수있는 라이브러리이기 때문입니다. 어쩌면 다른 사람이 Milkchart에 대한 의견이있을 수 있습니다.

편집하다:

내가 언급 한 또 다른 도서관은입니다 Plotkit 확장됩니다 Mochikit. 나는 그것을 사용하지 않았지만 분명히 그것은 canvas 요소이지만 사용 차트도 지원합니다 SVG. 확장 가능한 벡터 그래픽은 HTML을 사용하여 솔루션을 해킹하는 것 외에 다른 선언적 그래픽 옵션을 제공하지만 SVG 기반 솔루션이 어떻게 (특히 IE에서) CrossBrowser가 어떻게 될지 잘 모르겠습니다.

편집하다:

여기 DIV 요소를 사용하여 차트를하는 jQuery 플러그인입니다. 나는 다른 옵션보다 더 복잡하고 쉽게 구성 가능하다고 생각하기 때문에 개인적 으로이 옵션을 좋아하지 않습니다. 나는 HTML 요소를 사용하여 복잡한 선언적 그래픽을 만들고 (인상적이지만) 일종의 해킹 된 솔루션이며 내 경험에 따라 어느 시점에서 문제를 일으킬 것입니다.

Answer 2

문서에 따르면 Flot과 Milkchart는 Excanvas 확장이 설치된 경우에만 작동합니다.

더 큰 휴대 성을 위해서는 확인하는 것이 좋습니다 Google 시각화 API 사용하기가 매우 간단하고 다양한 디스플레이 가능성이 있습니다. 시각화는 플래시 요소 (대화식) 또는 일반 이미지 (정적)로 렌더링됩니다.