d3.js와 chart.js의 비교 (차트에만 해당)

Question

내 프로젝트에서 chart.js를 여러 번 사용했지만 d3.js를 사용한 적이 없습니다. 많은 사람들은 d3.js가 차트를위한 최고의 자바 스크립트 프레임 워크라고 말하지만 그 중 아무도 이유를 설명 할 수 없으며, 특히 chart.js와 비교할 때 유용합니다.

나는 이것을 찾았습니다 : http://www.fusioncharts.com/javascript-charting-comparison/ 그러나 그것은 내가 찾고있는 것이 아닙니다.

누구나 유용성과 성능 측면에서 차트를 비교할 때 이러한 프레임 워크를 비교할 수 있습니까?

Answer 1

d3.js은 "차트"라이브러리가 아닙니다. SVG/HTML을 생성하고 조작하기위한 라이브러리입니다. 데이터를 시각화하고 조작하는 데 도움이되는 도구를 제공합니다. 기존 차트 (바, 선, 파이 등)를 만들 때 사용할 수 있지만 훨씬 더 많은 기능이 있습니다. 물론이 "능력있는"능력은 가파른 학습 곡선이됩니다. 해당 경로로 가고 싶다면 d3.js - nvd3.js, dimple.js, dc.js 위에 구축 된 많은 기존 차트 라이브러리가 있습니다.

나는 Chart.js에 익숙하지 않지만 웹 사이트를 간략하게 살펴보면 밀 차트 차트 라이브러리가 더 많이 실행된다는 것을 알 수 있습니다. 6 가지 기본 차트 유형을 지원하며 수행하지 않으려 고합니다. stufflikethiswithit. 그러나 API는 간단 해 보이며 사용하기 쉽습니다.

이외의 가장 분명한 차이점은 Chart.js은 캔버스 기반이며 d3.js은 주로 SVG에 관한 것입니다. (이제는 은 주로입니다. 왜냐하면 SVG가 모든 유형의 HTML 요소를 조작 할 수 있기 때문에 you could even use it 캔버스에서 그리는 데 도움이됩니다.) 일반적으로 캔버스는 많은 수의 요소에 대해 SVG를 수행합니다. 점, 선 등). SVG는 다른 한편으로 조작하기 쉽고 상호 작용하기 쉽습니다. SVG를 사용하면 각 포인트, 라인 등이 DOM의 일부가됩니다. 현재 그린 포인트를 원한다면 변경하십시오. 캔버스를 사용하여 변경하기 위해 다시 그려지는 정적 드로잉 - 당연히 눈치 채지 못할 정도로 빨리 드로잉합니다. Microsoft의 some good reading입니다.

Answer 2

2016 업데이트

엄지 손가락의 일반적인 규칙은 다음과 같습니다

d3.js - 인터랙티브 시각화

chart.js에 좋은 - 빠른에 좋은 간단한

A few other charting libraries가 증가하고있다, 그래서 시험을 계속하고 open source에 기여하는 것을 잊지 마세요!

Answer 3

모바일 장치에서 차트를 표시 할 수있는 빠른 차트 라이브러리를 찾고 있기 때문에 성능이 중요했습니다. 또한 상업적으로 사용할 수있는 라이센스가 있어야했습니다. I 비교 : D3에 기초하므로 SVG

차트를 사용한다

1. C3를.js는 캔버스를 사용합니다

차트는 네이티브 앱 내부의 WebView 구성 요소 내에로드되며 모든 데이터 (JS 라이브러리 포함)는 로컬이므로 HTTP 요청으로 인해 속도가 저하되지 않습니다. 성능을 극대화하기 위해 모든 것을 하나의 단일 파일에 추가했습니다.

500 개의 데이터 포인트와 함께 4 개의 차트 (라인, 바, 파이, 라인/바 콤보)를로드했습니다.

측정 시간이 실제 html 페이지로드를 제외 시켰습니다. 나는 렌더링이 끝날 때까지 차트 라이브러리 코드를 사용하기 시작하면서 양식을 측정했습니다. 모든 차트 애니메이션이 꺼졌습니다.

C3는 최신 Android 및 IPhone 기기에서 약 1,500 ~ 1,200 밀리 초를 사용했습니다. iPhone은 Android보다 100ms 정도 성능이 좋습니다.

Chart.js는 약 400-800ms 걸렸습니다. 안드로이드는 iPhone보다 300ms 정도 성능이 뛰어납니다.

놀라운 것은 아니지만 SVG가 느립니다. 유스 케이스에 따라 너무 느릴 수도 있습니다.

데스크톱 컴퓨터에서 c3의 렌더링은 약 150-200ms이고 charts.js는 약 80-100ms입니다. Android 및 iPhone 에뮬레이터에서 동일한 테스트를 실행 한 결과 데스크톱에서와 동일한 결과를 얻었습니다. 따라서 모바일 장치의 속도 저하는 하드웨어/처리 제한으로 인한 것입니다.

도움이 되길 바랍니다.