Appcelerator 마켓 플레이스에서 찾을 수있는 ti.charts 모듈은 iOS 전용입니다. 안드로이드와 iOS 모두에서 작동하고 가장 일반적인 차트, 막대, 선, 파이 등을 제공하는 경량 솔루션을 원했습니다. 가장 간단한 방법은 웹보기 내에서 차트 자바 스크립트 라이브러리를 사용하는 것이 었습니다.
내 자격 :
- 빠른
- jQuery 의존성이 없음
- 초기 추첨 애니메이션
- 좋은 기본 스타일링
이제는 자바 스크립트 차트 라이브러리가 많이 있지만 위의 모든 자격 조건을 충족하는 것은 아닙니다. 과도한 금액은 jQuery에 의존합니다. 이전에 jQuery에 의존하는 몇 가지를 엉망으로 만들었습니다. 데이터 포인트가 너무 많을 때 렌더링 시간이 느리며 너무 많으면 전체가 아닙니다. webView는 사용할 수있는 가장 자원 집약적 인 구성 요소 중 하나이므로 단순성을 유지하기 위해 수행 할 수있는 것이 많을수록 좋습니다.
나는 몇 주 동안 검색 한 후 바로 내가 원하는 것을하는 새로운 라이브러리를 발견했습니다. ChartJS. 다음은 사용자 정의 데이터 포인트를 전달하면서 차트를 webView에 구현하는 방법입니다.
이 프로젝트에는 자동으로 생성 된 파일 외에 3 개의 파일이 있습니다.
app.js
source / chart.html
source / chart.wvjs –이 파일은 여기에있는 Chart.js의 자바 스크립트를 포함합니다.
app.js var win = Titanium.UI.createWindow ({backgroundColor : '# fff'}); var chartView = Ti.UI.createWebView ({높이 : 200, 너비 : 320, 왼쪽 : 0, 위쪽 : 0, showScrollbars : false, touchEnabled : false, url : '/source/chart.html'}); win.add (chartView); var button = Ti.UI.createButton ({제목 : 'Regenerate', 상단 : 220, }); win.add (버튼); button.addEventListener ( 'click', function () {var options = {}; options.data = new Array (Math.floor (Math.random () * 1001), Math.floor (Math.random () * 1001), Math.floor (Math.random () * 1001), Math.floor (Math.random () * 1001), Math.floor (Math.random () * 1001)); Ti.App.fireEvent ( 'renderChart', 옵션);}); win.open ();
창, 웹보기 및 새 데이터로 그래프를 다시 그릴 수있는 단추를 만들어 시작합니다. 버튼을 클릭하면 options라는 객체를 만듭니다. 1에서 1000 사이의 5 개의 난수가 생성되어 options.data 배열에 할당됩니다.
그런 다음 Ti.App.fireEvent가 2 개의 인수로 호출됩니다. renderChart 는 첫 번째로 전달 된 항목이므로 코드 어딘가에 동일한 이름의 해당 이벤트 리스너가 있어야합니다. 두 번째 항목은 옵션 개체입니다. 이제 배열을 직접 전달하지 않은 이유를 스스로에게 물어볼 수 있습니다. …… 작동하지 않으며 개체가 예상됩니다. 배열을 객체에 첨부하면 해당 데이터를 html 파일 내에있는 이벤트 리스너로 전달할 수 있습니다.
webView가 Titanium 자체와 통신하려면 이와 같은 이벤트 핸들러를 사용해야합니다. Titanium과 webView는 통신 라인을 여는 방법이 필요하며 이것이 바로 그 일입니다.
views / chart.html
차트 라이브러리의 기본 파일 확장자는 .js입니다. .js 확장자를 사용할 때 Titanium과 충돌이 발생할 수 있으므로 webView에서 호출되는 자바 스크립트 파일의 이름을 바꾸십시오. 내 선호는 .wvjs이지만 실제로 무엇이든 사용할 수 있습니다.
renderChart 의 eventListener 내에 차트 자바 스크립트 코드가 있음을 알 수 있습니다. 이것은 티타늄 코드에서 fireEvent가 실행될 때 실행됩니다. 캔버스의 너비와 높이는 HTML에 속성을 추가하는 대신 자바 스크립트로 지정되며, 새 데이터로 새 차트를 재생성 할 때 캔버스에 존재하는 것을 지우는 목적으로 사용됩니다.
