자바 스크립트 차트 라이브러리

누구나 특정 JavaScript 차트 라이브러리, 특히 플래시를 전혀 사용하지 않는 라이브러리를 추천 하시겠습니까?

Flash를 필요로하지 않는 순수한 JavaScript 차트 작성을위한 오픈 소스 및 상용 솔루션의 수가 증가하고 있습니다. 이 답변에서는 공개 소스 옵션 만 제시합니다.

플래시가 필요없는 그래픽을위한 2 가지 주요 클래스의 JavaScript 솔루션이 있습니다.

• VML에 의존하는 ExplorerCanvas를 사용하여 IE에서 렌더링되는 캔버스 기반
• IE에서 VML로 렌더링되는 표준 기반 브라우저의 SVG

두 가지 접근 방식의 장단점이 있지만 차트 라이브러리의 경우 DOM과 잘 통합되어 차트 요소를 DOM으로 조작하고 DOM 이벤트를 가장 중요하게 설정하기 때문에 나중에 권장합니다. 반대로 Canvas 차트 라이브러리는 이벤트를 관리하기 위해 DOM 휠을 재발 명해야합니다. 따라서 이벤트 처리없이 정적 그래프를 만들지 않는 한 SVG / VML 솔루션이 더 좋습니다.

SVG / VML 솔루션의 경우 다음을 포함한 많은 옵션이 있습니다.

• Dojox Charting , Dojo 툴킷을 이미 사용하고 있다면 좋습니다.
• 라파엘 기반 솔루션

Raphael 은 IE 6 ~ 8, Firefox, Opera, Safari, Chrome 및 Konqueror를 포함한 브라우저 간 지원이 매우 우수한 매우 활동적이고 잘 관리되고 성숙 된 오픈 소스 그래픽 라이브러리입니다. Raphael은 JavaScript 프레임 워크에 의존하지 않으므로 프로토 타입, jQuery, Dojo, Mootools 등과 함께 사용할 수 있습니다.

Raphael을 기반으로하는 수많은 차트 라이브러리가 있습니다.

• 라파엘 그래픽 라이브러리의 확장 인 gRaphael
• 복잡한 차트를 생성하기위한 단일 함수 호출을 기반으로하는 직관적 인 API를 갖춘 Ico

공개 : 나는 github의 Ico 포크 중 하나의 개발자입니다 .

jQuery를 사용하는 경우 flot 이 매우 훌륭 하다는 것을 알았 습니다. 예제 를 사용하여 요구 사항에 맞는지 확인하십시오. 그러나 현재 프로젝트에 필요한 대부분의 작업을 수행하는 것으로 나타났습니다.

또한 ExtJS 4.0 은 강력한 차트를 제공하며 실시간 데이터와 함께 작동하도록 설계되었습니다.

http://www.highcharts.com을 확인 하십시오 !

Highcharts는 순수한 JavaScript로 작성된 차트 라이브러리로, 웹 사이트 나 웹 응용 프로그램에 대화 형 차트를 쉽게 추가 할 수 있습니다. 하이 차트는 현재 선, 스플라인, 영역, 영역 스플라인, 열, 막대, 파이 및 분산 형 차트 유형을 지원합니다.

정확히 원하는 것은 아니지만
Google의 Chart API 는 매우 멋지고 사용하기 쉽습니다.

SVG에 기반한 또 다른 자바 스크립트 라이브러리가 있습니다. 그것은 Protovis 라고 합니다 Stanford Visualization Group에서 가져옵니다.

또한 멋진 대화식 그래픽 및 시각화를 만들 수 있습니다.

http://vis.stanford.edu/protovis/ex/

최신 웹 브라우저 전용이지만

최신 정보: protovis 팀은 다음과 같이 d3.js (Data Driven Documents)라는 다른 라이브러리로 옮겼습니다.

"Protovis 팀은 이제 애니메이션 및 상호 작용에 대한 지원이 개선 된 새로운 시각화 라이브러리 인 D3.js를 개발하고 있습니다. D3는 Protovis의 많은 개념을 기반으로합니다."

새 라이브러리는 다음에서 찾을 수 있습니다.

http://mbostock.github.com/d3/

업데이트 2 :

"Rickshaw"는 대화식 시계열 그래프를 만들기위한 JavaScript 툴킷입니다. d3.js를 기반으로 d3.js의 작업이 훨씬 간단하지만 약간 덜 강력합니다.

http://code.shutterstock.com/rickshaw/

나는 최근에 자바 스크립트 차트 라이브러리를 찾고 있었고 마침내 jqplot에 정착하기 전에 전체 무리를 평가했습니다. 내 요구 사항에 잘 맞는 . Jean Vincent의 답변에서 언급했듯이 실제로 캔버스 기반 솔루션과 svg 기반 솔루션 중 하나를 선택하고 있습니다.

제 생각에 주요 장단점은 다음과 같습니다. Raphael 과 같은 SVG 기반 솔루션 (및 파생물)은 매우 동적 / 대화 형 차트를 구성하려는 경우 유용합니다. 또는 차트 요구 사항이 표준을 벗어난 경우 (예 : 일종의 하이브리드 차트를 만들거나 아직 아무도 생각하지 않은 새로운 시각화를 만들었습니다). 단점은 학습 곡선과 작성해야 할 코드의 양입니다. 몇 분 안에 차트를 만들지 않고 실제 학습 시간을 투자 한 다음 비교적 간단한 차트를 만들기 위해 상당한 양의 코드를 작성할 수 있습니다.

차트 요구 사항이 합리적으로 표준 인 경우 (예 : 상호 작용이 제한된 일부 선 또는 막대 그래프 또는 원형 차트 또는 두 개)를 원한다면 캔버스 기반 솔루션을 살펴볼 가치가 있습니다. 학습 곡선은 거의 없으며 몇 분 안에 기본 차트를 얻을 수 있으며 많은 코드를 작성할 필요가 없으며 몇 줄의 기본 javascript / jquery 만 있으면됩니다. 물론 라이브러리가 지원하는 특정 유형의 차트 만 생성 할 수 있으며 일반적으로 다양한 종류의 선, 막대, 파이로 제한됩니다. 인터랙티브 한 선택은 극도로 제한 될 것입니다. 즉, 일부 라이브러리에는 존재하지 않지만, 일부 호버링 효과는 더 나은 것으로 가능합니다.

표준 유형의 차트 만 실제로 필요했기 때문에 캔버스 기반 솔루션 인 JQplot을 사용했습니다. 내 연구와 다양한 선택으로 놀았을 때 나는 그것이 합리적인 가격으로 (표준 차트를 따르는 경우에만) 사용하기가 매우 쉽다는 것을 알았으므로 요구 사항이 비슷한 경우 권장합니다.

요약하고 간단하게 차트를 원한다면 JQplot을 사용하십시오. 복잡하고 다양하며 시간 동안 압박을받지 않으면 라파엘과 친구들과 함께 가십시오.

jqPlot 은 훌륭합니다. 요구 사항이 상당히 "정상"이고 일부 차트를 그리려는 경우 js 차트 옵션의 양이 압도적 일 수 있습니다. 몇 시간의 연구를 원하지 않는다고 가정하면 jqPlot을 사용하는 것이 가장 좋습니다. 대부분의 사람들을위한 대부분의 사용 사례를 잘 다룹니다. 대안 중 일부는 특정 유형의 차트에 특화되어 있거나 특정 사용 사례를 염두에두고 작성되었습니다.

늦은 답변으로 d3.js
http://mbostock.github.com/d3/

그것은 protovis의 연속입니다.
플로트와의 큰 차이점은 지원되는 기능의 수입니다.
flot가 더 간단 할 수 있지만 d3.js는 확실히 더 강력합니다.

Flotr는 프로토 타입을 기반으로 영감을 다른, 순수 자바 스크립트 차트 라이브러리입니다 FLOT

PlotKit 사용해 보기

나는 순수한 JavaScript 차트 작성을 위해 gRaphaël 과 그것이 빌드 된 순수한 JavaScript 벡터 그래픽 라이브러리 ( Raphaël )를 권장 합니다 .

gRaphaël은 현재 Firefox 3.0 이상, Safari 3.0 이상, Opera 9.5 이상 및 Internet Explorer 6.0 이상을 지원합니다.

• 프레임 워크 : http://www.simile-widgets.org/

기본 : http://www.filamentgroup.com/examples/charting_v2/index_2.php

잘 생긴 : http://www.highcharts.com/

다른 하나는 RGraph : Javascript 차트 및 그래프 라이브러리입니다.

http://www.rgraph.net

캔버스 기반이므로 빠르며 대략 20 가지의 차트 유형이 있습니다. 비상업적 용도로는 무료입니다!

내가 좋아하는 (flot)은 이미 언급되었습니다.

그러나 Ortho 를 조사하십시오 . 트리 차트 및 타임 라인에 적합합니다.

dojo 차트 라이브러리에는 많은 활동이 있으며 문제없이 AIR 응용 프로그램에서도 사용하고 있습니다. 예를 들어 http://www.sitepen.com/blog/2008/05/27/dojo-charting-event-support-has-landed/를 참조하십시오 .

더 간단한 Chart API를 일반화 한 Google Visualization API를 확인하십시오.

http://code.google.com/apis/visualization/documentation/gallery.html

지도, 게이지 및 차트를 포함한 매우 멋진 대화식 옵션이 있습니다.

새로운 스타트 업을 위해 TechOctave Charts Suite 라이센스를 구입했습니다 . 나는 그들을 강력히 추천한다. 라이센싱은 간단합니다. 차트가 좋아 보인다! 시작하기 쉽고 필요할 때 사용할 수있는 강력한 API가 있습니다. 코드가 얼마나 깨끗하고 확장 가능한지에 충격을 받았습니다. 우리의 선택에 정말 만족합니다.

- 차트로 만들어 질 수있는 MIT의 직유 타임 라인 시도 http://simile.mit.edu/timeline/을

또는 마지막 것, http://code.google.com/p/gchart/

자바 스크립트 라이브러리는 아니지만 적절한 대안이 될 수 있습니다. 쿼리 문자열 데이터를 웹 서비스에 전달하여 차트를 생성 할 수있는 Google 차트를 확인하십시오 .

한 번 봐 가지고 허세를 . Ruby 용 Gruff 그래프 라이브러리의 JavaScript 포트입니다.

프로토 차트 만 있으면됩니다

Sencha는 Raphael을 인수했으며 이제 차트는 버전 4부터 순수한 자바 스크립트입니다. 위에서 언급 한 Emprise와 HighCharts는 제가 가장 좋아하는 두 가지입니다.

http://www.sencha.com/

더 특이한 차트 : http://thejit.org/

ArcadiaCharts 추천 할 수 있습니다 . JavaScript 및 GWT를위한 새로운 전문 차트 라이브러리. 플러그인없이 모든 브라우저에서 실행됩니다. 쉽고 빠른 사용 : 몇 줄의 코드로 멋진 차트를 만듭니다. 비상업적 용도로는 무료입니다.

퓨전 차트 에는 유망 해 보이는 새로운 javascript / jquery 라이브러리가 있습니다.

필요한 경우 막대 차트 만 있습니다. 오래된 프로젝트에서 사용한 코드를 게시했습니다. 누군가 나에게 최신 버전의 IE에서 VML 구현이 중단되었다고 말했지만 SVG는 제대로 작동합니다. 프로젝트로 돌아와서 이미 가지고있는 서버 측 렌더러와 WebGL 렌더링 레이어를 릴리스 할 수 있습니다. 링크가 있습니다 : http://blog.conquex.com/?p=64

아마도 OP가 찾고있는 것이 아니지만이 질문이 JS 차트 라이브러리 옵션 목록이 되었기 때문에 jQuery Sparklines 는 정말 멋집니다.

확인 ZingChart HTML5 캔버스, SVG, VML 및 플래시 차트를 . 매우 강력하고 호환되는 라이브러리. 나는 Zing 팀에 있습니다-트위터 @zingchart에서 우리를 언급 하거나 support@zingchart.com에 질문을하십시오.