2012-12-12 3 views
27

MoSync를 통해 크로스 플랫폼 모바일 애플리케이션을 개발 중입니다. 휴대 기기에서 블루투스에서 데이터를 표시하는 JavaScript 차트와 관련하여 매우 빠른 렌더링 속도와 성능을 갖춘 JavaScript 차트 API가 필요합니다. 데이터가 Webview에 삽입 될 때 차트를 그리거나 다시 그리거나 업데이트 할만큼 빠릅니다. AFAIK는 몇 가지 API 테스트에서 데이터 주입은 모바일 애플리케이션의 속도를 줄입니다. FFI를 사용하면 응용 프로그램에서 원활하게 실행하기 위해 차트 속도가 얼마나 빨라지는지 알 수 있습니다.HTML을 통한 모바일 애플리케이션 용 고성능 JavaScript 차트 API

  1. 업데이트 : 모든 500ms로 또는 아마도 250 밀리
  2. 갱신 당
  3. 새로운 데이터 (API 차트 블루투스에서)를 통과
  4. 데이터 셋 시리즈 크기 (50) 세 배열 : C++> > UI (HTML) >> WebView >> 차트 API

유용한 JavaScript 차트 API를 많이 알고 있지만, 설명 된 상황을 고려했습니다.

답변

40

아래에서 내 연구를 찾을 수 있습니다. 다행히도 이는 솔루션을 찾는 데 도움이됩니다.

  1. Comparison of JavaScript Data Visualization Libraries는 특히 flotr2 성능을 위해 만들어진 것을 말한다. 그것은 6 월에 게시 된 2012 년

    모바일 친화적 인 : 예, 성능을 내장하고 터치 이벤트/멀티 터치

    흥미로운 기능이 포함되어 확장 플러그인 프레임 워크, 성능 조정합니다. JSON API를, 상호 작용

  2. RGraph에 대한 프로그램 : 특별히 성능과 모바일 문제를 해결 주목할만한 솔루션입니다. They have a whole page breaking down how they achieve superior performance.

  3. JSXGraph : 비교 항목 13 Chart and Graph plotting javascript plugins에는 "성능을 최적화하기 위해 특별히주의를 기울였습니다."라고 나와 있습니다. 그러나 모바일 지원에 관한 사이트에서는 아무 것도 볼 수 없었습니다.

  4. 당신이 좀보고 할 수 있습니다 : 당신을 위해 어떤 사용 될 내가 거기에 볼 수 있습니다

    http://jsperf.com/search?q=chart

    단 하나, 그래도 FLOT 대 라파엘입니다. 물론 여러분은 항상 을 빌드하고 관심있는 다른 libs에 대한 테스트를 직접 작성할 수 있습니다.https://stackoverflow.com/a/9900526/1085891

  5. 를 통해

    불행하게도, Javascript Graphs and Charts libraries 비교는 성능 기준이없는하지만, 난 여전히 도움이 될 줄 알았는데.

    R/프로그래밍을 통해
  6. 또 다른 : 추가 https://canvasjs.com

: 여기JavaScript Performance On Mobile Devices

+0

자세한 답변 해 주셔서 감사합니다. flotr2는 모바일 응용 프로그램에서 원활하게 작동하며 250ms마다 크기 100의 배열 3 개를 추가 했으므로 성능이 대단합니다. 믿을 수 없다 :) – utvecklare

+2

다른 r/프로그래밍을 통해 : http://canvasjs.com/ – JSuar

3

큰 데이터 세트 (최대 10000 점)가있는 Highcharts 차트 라이브러리의 훌륭한 경험을했습니다. 렌더링에 SVG 및 VML을 사용하며 캔버스 기반 솔루션보다 훨씬 빠릅니다. 또한 플래시를 사용하지 않기 때문에 대부분의 모바일 장치에서 작동합니다.

+1

어떻게 실시간 데이터를 처리합니까? 내 경험으로 addPoint()를 호출하여 초당 새 포인트를 추가하거나 초당 몇 번씩 메모리를 많이 누설합니다. –

+0

감사합니다. Ryan, 고화질도 사용했지만 긴 지연 문제는 여전히 업데이트를 시도하는 동안 사용할 수 있습니다. 자바 스크립트 코드를 webview에 삽입 한 다음 addPoint() 메서드를 호출하면됩니다. – utvecklare

+0

대신'Series # setData()'를 호출하고 전체 시리즈의 데이터를 업데이트하십시오. –

4

다른 고성능 차트 도서관 그것은 100-200ms에 10 만 이상의 데이터 포인트를 렌더링 CanvasJS

라고합니다. Canvas를 기반으로하므로 대부분의 최신 장치에서 작동합니다.

관련 문제