KB)本連載では、グレープシティが提供するJavaScriptライブラリ「Wijmo(ウィジモ)」について、サンプルとともに利用例を紹介します。5が提供するグラフやゲージ、入力部品について利用法を説明していきます。入力途中で候補を表示するAutoCompleteコントロール入力形式を強制できるInputMaskまとめ参考資料はじめにWijmo(ウィジモ)は、グレープシティがHTML/JavaScript環境に向けて提供しているJavaScriptライブラリで、WebサイトやWebアプリケーションで活用できるUI部品を利用者に提供します。5」には、前回記事で紹介したグリッド部品「FlexGrid」以外にも表1のようなUI部品(JavaScriptコントロール)が含まれています。入力部品(多機能テキストボックス、カレンダーなど)本記事では表1のUI部品について、概要と利用法をサンプルで説明していきます。5をサポートする、いわゆるモダンブラウザをターゲットにしており、WijmoのWebサイトでは以下のブラウザがサポート対象として案内されています。今回は以下の環境で動作を確認しています。5のAngularJS連携機能を利用しています。チャートを表示するFlexChartFlexChartはチャートを表示するUI部品です。AngularJSと組み合わせる場合はwj-flex-chartディレクティブ(独自タグ)でチャート全体を、wj-flex-chart-seriesディレクティブで1つのデータ系列を記述します。棒グラフと折れ線グラフ、凡例を表示する図1のようなサンプルを本連載の第2回で説明しています(今回記事のサンプルコードにも同じ内容のサンプルを含めています)。FlexChartによるグラフ表示(001_wijmo_flexchart1.html)グラフの種類を指定FlexChartではchartTypeプロパティ(chart-typeディレクティブ属性)の設定によりさまざまなグラフを表示できます。主なグラフの種類を表2に示します。サポートするすべての種類はドキュメントを参照してください。スプライングラフ(曲線でデータを補完)これらのグラフ種類を切り替えて表示するサンプルをリスト1に示します。value="Spline">Spline</option></select>wj-flex-chartのchart-type属性にスコープの変数chartTypeを指定します。selectタグで記述されたプルダウンを操作するとAngularJSの双方向バインディングによりchartTypeの値が変更され、それに応じてグラフの種類が切り替わります。グラフの種類を切り替えて表示(002_wijmo_flexchart2.html)タイトルと軸の設定グラフにはwj-flex-chartのheader、footer属性でヘッダー・フッター文字列を設定できます。wj-flex-chart-axisディレクティブで軸の設定をカスタマイズできます。これらを設定した例をリスト2に示します。--></wj-flex-chart>wj-flex-chartディレクティブのheader、footer属性でヘッダー(「営業記録」)とフッター(「2015年4月1日現在」)を設定しています。(1)は軸の指定で、wj-propertyに"axisX"を設定してX軸を表しています。ここでは軸に表示する文字列をtitle属性に設定しています。major-gridは軸のグリッド線を表示する属性で、trueを設定してグリッド線を表示させます。(2)はy軸の指定で、titleのほかにmax、min属性で最大値・最小値を、major-unit属性で軸線の間隔を指定しています。リスト2を実行すると、タイトルと軸がカスタマイズされたグラフが表示されます。