내 프로젝트에서 chart.js를 여러 번 사용했지만 d3.js를 사용한 적이 없습니다. 많은 사람들이 d3.js가 차트를위한 최고의 자바 스크립트 프레임 워크라고 말하지만 그들 중 누구도 그 이유를 설명 할 수 없습니다. 특히 내가 chart.js와 비교하고 싶을 때 말입니다.
나는 이것을 찾았습니다 : http://www.fusioncharts.com/javascript-charting-comparison/ 그러나 내가 찾던 것이 아닙니다.
사용성 및 성능 측면에서 이러한 프레임 워크의 비교에 대해 아는 사람이 있습니까 (차트에만 해당)?
답변:
d3.js"차팅"라이브러리가 아닙니다. SVG / HTML을 만들고 조작하기위한 라이브러리입니다. 데이터를 시각화하고 조작하는 데 도움이되는 도구를 제공합니다. 이를 사용하여 기존 차트 (막대, 선, 원형 등)를 만들 수 있지만 훨씬 더 많은 작업이 가능합니다. 물론이 "너무 많은 능력이있다"는 학습 곡선이 더 가파르다. 위에 구축 된 기존의 차트 라이브러리 많이 있습니다 d3.js- nvd3.js, dimple.js, dc.js당신이 그 길을 가고 싶어합니다.
나는 익숙하지 Chart.js않지만 웹 사이트를 훑어 보면 이것이 밀 차트 라이브러리의 실행에 가깝다는 것을 알 수 있습니다. 그것은 6 개 기본 차트 유형을 지원하고 당신은 이제까지하지 않을 물건을 같이 이 와 그것 . 하지만 API는 간단 해 보이며 사용하기 쉽다고 확신합니다.
그 외에는 둘 사이의 가장 명백한 차이점 Chart.js은 캔버스 기반 d3.js이며 주로 SVG에 관한 것입니다. (이제는 주로d3.js 모든 유형의 HTML 요소를 조작 할 수 있으므로 캔버스에 그리는 데 사용할 수 있기 때문에 주로 말합니다 .) 일반적으로 캔버스는 많은 수의 요소에 대해 SVG를 수행합니다. 포인트, 라인 등 ...). 반면 SVG는 조작하고 상호 작용하기가 더 쉽습니다. SVG를 사용하면 각 점, 선 등이 DOM의 일부가됩니다. 이제 해당 점을 녹색으로 원하고 변경하면됩니다. 캔버스를 사용하면 변경하기 위해 다시 그려야하는 정적 드로잉이 있습니다. 물론 너무 빨리 그려 지므로 일반적으로 눈에 띄지 않습니다. 다음 은 Microsoft의 좋은 자료 입니다.
모바일 장치에서 차트를 표시하기 위해 빠른 차트 라이브러리를 찾으려고했기 때문에 성능이 중요했습니다. 또한 상업적으로 사용할 수있는 라이선스가 있어야했습니다. 나는 비교했다 :
차트는 네이티브 앱 내의 WebView 구성 요소 내에로드되며 모든 데이터 (JS 라이브러리 포함)는 로컬이므로 http 요청으로 인해 느려지지 않습니다. 성능을 더욱 극대화하기 위해 모든 것을 하나의 단일 파일에 추가로 넣었습니다.
약 500 개의 데이터 포인트와 함께 4 개의 차트 (선, 막대, 원형, 선 / 막대 콤보)를로드했습니다.
내 시간 측정은 html 페이지의 실제 로딩을 배제했습니다. 렌더링이 끝날 때까지 차트 라이브러리 코드를 사용하기 시작한 순간부터 측정했습니다. 모든 차트 애니메이션이 꺼졌습니다.
C3는 최신 Android 및 IPhone 장치에서 약 1500-1800ms가 걸렸습니다. iPhone은 Android보다 약 100ms 더 나은 성능을 보였습니다.
Chart.js는 약 400-800ms가 걸렸습니다. Android는 iPhone보다 약 300ms 더 나은 성능을 보였습니다.
당연히 SVG가 더 느립니다. 사용 사례에 따라 너무 느릴 수 있습니다.
데스크톱 컴퓨터에서 c3의 렌더링은 약 150-200ms이고 charts.js는 약 80-100ms였습니다. Android 및 iPhone 에뮬레이터에서 동일한 테스트를 실행하면 데스크톱에서와 동일한 결과가 나타납니다. 따라서 모바일 장치의 속도 저하는 하드웨어 / 처리 제한 때문입니다.
도움이되는 희망
2016 년 업데이트
일반적인 경험 법칙은 다음과 같습니다.
d3.js -대화 형 시각화에 적합
chart.js -빠르고 간단하게
몇 가지 다른 차트 라이브러리 가 증가하고 있으므로 테스트를 계속하고 오픈 소스 에 기여하는 것을 잊지 마십시오 !