jqplot (WebView)로 그래프 그리기

10978 단어 Titanium

1. 소개



Titanium에서 그래프를 그리는 방법은 두 가지가 있습니다.
- 모듈 사용
- WebView 사용
이 기사에서는 후자의 WebView를 사용하여 그래프를 그리는 방법을 소개합니다.

또, 여기에서는 WebView에서 이용하는 라이브러리에 jqplot(무료)를 이용합니다.

빌드 가능한 프로젝트 파일 세트는 아래 URL에 있습니다.
htps : // 기주 b. 코 m / 요시카즈 오오타 / jqp ぉ

2. 상정하는 동작 환경



여기서 소개하고 있는 범위에서는 Android/iOS 양쪽 모두 1 코드로 실행할 수 있습니다.
iOS에 비하면 안드로이드 계에서는 다소 묘화가 붙습니다만, 실용 레벨의 처리 속도라고 생각합니다.
  • Ti SDK: 3.3.0.GA 이상
  • OS: Android(2.X~)/iOS(6.X ~)

    • 3. 처리 흐름



    WebView를 사용하여 그래프를 그리는 요령은, 「WebView측에서 그래프 드로잉 라이브러리의 로드를 기다리고 나서, 기입의 함수를 실행한다」라고 말하는 것입니다.
    즉, WebView측의 처리계와 Titanium측의 처리계로 이벤트를 교환하게 됩니다.



    4. 메인 코드



    위의 코드, 얽히 대응하기 위해 번호를 흔들고 있습니다.

    app.js
    var event_name = 'myJqplotEvent';

// グラフ描画データ(詳細は jqplotのドキュメントを参照)
var data = [[3, 7, 9, 1, 4, 6, 8, 2, 5]];
var option = {
  title: 'Plot With Options',
  axes: {
    xaxis: {label: "X Axis", pad: 0},
    yaxis: {label: "Y Axis"}
  }
};


var window = Ti.UI.createWindow({
  backgroundColor: 'white',
  touchEnabled: false // これを付けないとWebView内でスクロールが発生したりして不都合がある
});

// ▼▼▼ ① html読込 ▼▼▼
var webView = Ti.UI.createWebView({
  url: 'html/jqplot.html',
  top: '30dp',
  height: '300dp',
  width: '300dp'
});
window.add(webView);

// ▼▼▼ ③ グラフ描画データ(文字列)送信 ▼▼▼
var chartFunc = function () {
  // 注: webview側のJSには文字列として値を渡すので、オブジェクトは指定できません
  webView.evalJS("jqplot_ti(" + JSON.stringify(data) + ", " + JSON.stringify(option) + ")");
  Titanium.App.removeEventListener(event_name, chartFunc);
};
Titanium.App.addEventListener(event_name, chartFunc);

window.open();

    jqplot.html
    <html>
<head>
    <title></title>
    <meta name="viewport" content="width=initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no"/>
    <script language="javascript" type="text/javascript" src="lib/jquery.min.lib"></script>
    <script language="javascript" type="text/javascript" src="lib/jquery.jqplot.min.lib"></script>
    <link rel="stylesheet" type="text/css" href="lib/jquery.jqplot.min.css" />

    <script type="text/javascript" charset="utf-8">
        $(function(){
            // ▼▼▼ ② ライブラリロード完了 ▼▼▼
            Ti.App.fireEvent('myJqplotEvent'); // event_nameと同じ値
        });
        function jqplot_ti(data, option) {
            $.jqplot('chartdiv', data, option);
        }
    </script>
</head>
<body>
<!-- height, width は Titaniumのjs側で指定する (300dp -10)で 290とする -->
<!-- すいません。どうしてこのような値が適当になるのかわかっていません... -->
<div id="chartdiv" style="height:290 ;width: 290;" ></div>
</body>
</html>

    5 처리 흐름 설명



    ① html 읽기
    WebView에서 html 파일을 로드합니다.　　
    　　
    ② 라이브러리 로드 완료
    jQuery를 사용한 프로그래밍의 정석대로, jQuery등의 로드를 기다리고 나서 Titnium측의 처리계에 이벤트를 던집니다. ③의 그래프 묘화 처리는 반드시 ②의 로드를 기다리고 나서 실시하지 않으면 정상적으로 실행할 수 없습니다.　　

    ③ 그래프 묘화 데이터(문자열) 송신
    Titanium측의 처리계로부터 묘화 하는 데이터를 html측의 처리계에 건네줍니다. 이때 드로잉 데이터는 문자열로 전달하기 때문에 객체 데이터는 보낼 수 없습니다.
    만약, 필요하다면 html측의 javascript로 객체를 정의하는 등의 대응이 필요합니다. (구체 예 : Titanium 측에서 날짜 형식을 문자열로 html 쪽으로 전달하고 html 측에서 날짜 형식으로 구문 분석)

    6. 조심하고 싶은 하마리 포인트



    WebView의 html에서 참조하는 javascript 파일 이름은 *.js를 *.lib 등으로 변경
    파일 확장자가 *.js이면 Titanium이 빌드 대상으로 판단되어 빌드시 오류가 발생합니다.

    7. 마지막으로



    비슷한 구현으로 대부분의 그래프 라이브러리를 사용할 수 있다고 생각합니다.

    여기서 소개한 코드는 설명용으로 기술했기 때문에, 사용하기 어렵다고 생각합니다.
    사용하고 있는 묘화 라이브러리는 다릅니다만 랩퍼도 작성하고 있습니다. 구현의 참고가 되면 다행입니다.
    jqChart (상업용) 래퍼 및 샘플 : htps : // 기주 b. 코 m / 요시카즈 오오타 / jq 짱 rtW Rape r

    질문등 있으면, 가능한 한 응답하도록 합니다! !

    내일은 xtity 씨의 기사군요. 재미입니다!
    Titanium(Alloy)에서 바코드 리더와 바코드 출력 결과를 함께 표시
    Titanium에서 Android 탭 아이콘이 작아질 때의 해결 방법

    좋은 웹페이지 즐겨찾기

    개발자 우수 사이트 수집

    개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
    best100-homepage