Appceleratorマーケットプレイスにあるti.chartsモジュールはiOS専用です。 AndroidとiOSの両方で機能し、チャート、バー、ライン、パイなどの最も一般的な機能を提供できる軽量なソリューションが必要でした。これを実行する最も簡単な方法は、Webビュー内でチャートJavaScriptライブラリを使用することでした。
私の資格：
- 速い
- jQueryの依存関係なし
- 初期描画のアニメーション
- 適切なデフォルトのスタイリング
現在、多くのjavascriptチャートライブラリがありますが、上記の要件をすべて満たしているわけではありません。 異常な量はjQueryに依存しています。 以前jQueryに依存しているいくつかのものをいじりましたが、通常、データポイントが多すぎるとレンダリング時間が遅くなります。 webViewは、使用できるリソースを最も多く消費するコンポーネントの1つです。したがって、物事をシンプルに保つためにできる限り多くのことができるようになります。
数週間の検索の後、先日新しいライブラリを見つけました。 ChartJS。 以下は、カスタムデータポイントを渡しながら、チャートをwebViewに実装する方法です。
このプロジェクトには、自動生成されたファイル以外に3つのファイルがあります
app.js
source / chart.html
source / chart.wvjs –このファイルには、ここにあるChart.jsのjavascriptが含まれています
app.js var win = Titanium.UI.createWindow（{backgroundColor： ' #fff '}）; var chartView = Ti.UI.createWebView（{height：200、width：320、left：0、top：0、showScrollbars：false、touchEnabled：false、url： '/source/chart.html'}）; win.add（chartView）; var button = Ti.UI.createButton（{title： 'Regenerate'、top：220、}）; win.add（button）; 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（）;
まず、ウィンドウ、Webビュー、および新しいデータでグラフを再描画するボタンを作成します。 ボタンをクリックすると、optionsというオブジェクトが作成されます。 1から1000までの5つの乱数が生成され、options.data配列に割り当てられます。
次に、Ti.App.fireEventが2つの引数で呼び出されます。 renderChart は 最初に 渡されるアイテムです。つまり、コードのどこかに、対応する同じ名前のイベントリスナーが必要です。 2番目の項目はオプションオブジェクトです。 さて、なぜ配列を直接渡さなかったのかを自問するかもしれません……それは機能しません。オブジェクトが期待されます。 オブジェクトに配列をアタッチすることにより、そのデータを、htmlファイル内に配置されるイベントリスナーに渡すことができます。
webViewがTitanium自体と通信するには、このようなイベントハンドラを使用する必要があります。 TitaniumとwebViewには通信回線を開く方法が必要です。これがまさにそれです。
views / chart.html
グラフ作成ライブラリのデフォルトのファイル拡張子は.jsです。 .js拡張子を使用すると、Titaniumと競合する可能性があることがわかったので、webViewから呼び出されるjavascriptファイルの名前を変更してください。 私の好みは.wvjsですが、実際には何でも使用できます。
renderChartの eventListener 内にチャートJavaScriptコードがあることが わかり ます。 これは、TitaniumコードからfireEventが実行されるときに実行されます。 キャンバスの幅と高さは、HTMLに属性を追加する代わりにjavascriptから指定されます。これは、新しいデータで新しいチャートを再生成するときにキャンバスに存在するものをクリアする目的に役立ちます。
