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

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



답변

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

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

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

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

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

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을 사용하는 것이 가장 좋습니다. 대부분의 사람들을위한 대부분의 사용 사례를 잘 다룹니다. 대안 중 일부는 특정 유형의 차트에 특화되어 있거나 특정 사용 사례를 염두에두고 작성되었습니다.