igchart 入門編
DESCRIPTION
NetAdvantage for jQuery の HTML5 チャートコンポーネントである、igChart の入門編です。TRANSCRIPT
jQuery/HTML5 チャート:igChart 入門編
セッションレベル : 200 – Basic
Daizen Ikehara : Developer [email protected] @Neri78
アジェンダ1 / NetAdvantage for jQuery / igChart 概要
2 / Infragistics Loader
3 / igChart : データバインディング
4 / igChart : 機能設定とユーザーインタラクション
5 / igChart : イベントハンドリング
6 / まとめ、リソース
1. NetAdvantagefor jQueryigChart概要
NetAdvantage シリーズ
NetAdvantage
Web / RIAWin / Rich Client
ReportingMobile
高パフォーマンス
HTML4 + 5
豊富な高機能UI ウィジェット
グリッドチャートツリーマップ (CTP)
スタイルサポート
ASP.NET MVC ラッパー提供
jQuery Mobile 対応UI ウィジェット
Jquery UI
ベース コント
ロール
jQuery / jQuery UI /
jQuery Mobile を
ベースに独自 UI, 機能
を提供
igChart
• パフォーマンスHTML5 チャート
• 多様なチャートタイプ
• モーションフレームワークによる動的変更
• XAML 製品と同等に近い機能
igChart:
HTML5, CSS3,
対応状況
HTML5 マークアップ CANVAS
HTML5 API キャンバス API
CSS3 スタイリング/アニメーション
なし
旧ブラウザーでの制限 上記機能が利用できない場合は動作せず
2. InfragisticsLoader
jQuery / jQuery UI を利用する場合はスクリプトファイル、CSS ファイルの参照が必要
JS ライブラリー
利用時のリソース参照
NetAdvantage for jQuery の関連ファイルは膨大
Infragistics Loader を利用することで関連リソースの参照、読み込みを自動化
Infragistics Loader 使用前
使用後
Infragistics Loader の初期化
リソース指定をし、初期化する場合
Infragistics Loader
からの呼び出し方法
<script type="text/javascript">// igLoader の読み込み$.ig.loader({
scriptPath: 'Scripts/IG',cssPath: 'Content/IG'
});
</script>
<script type="text/javascript">// igLoader の読み込み$.ig.loader({
scriptPath: 'Scripts/IG',cssPath: 'Content/IG',resources: 'igDataChart.*',ready: function () {// Do something}
});</script>
読み込みリソース
コンポーネント呼び出しなどの処理
3. igChart:データバインディング
サポートされるデータソース
igDataSource
IQueryable<T>
(ASP.NET MVC)
// チャート設定$("#chart1").igDataChart({
dataSource: data,…
});
軸要件が合えば、複数軸を組み合わせることが可能
軸の種類 X 軸 Y 軸 その他
X軸 Y軸 その他
categoryX categoryY
numericX numericY
categoryDatetimeX
categoryAngle
numericRadius
numericAngle
軸 axes コレクション
type
label
// チャート設定$("#chart1").igDataChart({
dataSource: data,axes: [{
type: "categoryX",name: "xAxis",label: "DateString",stroke: "rgba(0, 0, 0, 0.5)",strokeThickness: 5,interval: 1
}, {
type: "numericY",name: "volumeAxis",labelVisibility: "collapsed",stroke: "rgba(0, 0, 0, 0.5)",majorStroke: "rgba(0, 0, 0, 0)"
}],…
});
軸の種類
ラベルデータへのバインド(必要な軸のみ)
円チャートは igPieChart にて提供複数シリーズを定義可能
チャート要素 シリーズ
bar column line
area spline splineArea
waterfall candlestick polarScatter
polorarea radialline RadialColumn
radialPie rangeArea rangeColumn
bubble scatter scatterLine
Ohlc
シリーズ series コレクション
type
xAxis
yAxis
valueMember
Path
// チャート設定$("#chart1").igDataChart({
dataSource: data,…
series: [{
type: "line",name: "volumeSeries",brush: "rgba(255, 0, 0, 1)",title: "売上",markerType: "circle",xAxis: "xAxis",yAxis: "volumeAxis",valueMemberPath: "Volume",showTooltip: true
}],});
シリーズの種類
チャートデータのパス
DEMOigChart データ表示
4. 機能設定とユーザーインタラクション
ビルトイン機能
ユーザーインタラクションシナリオ
主要機能 凡例 ナビゲーション（拡大・縮小）
ツールチップ
十字ポインター マーカー トレンドライン
ズーム パンニング 表示エリア移動
ホバー 軸線の表示・非表示
軸主線、副線の表示・非表示
軸ストライプの表示・非表示
軸ラベルの表示・非表示
データ シリーズの表示・非表示
凡例の表示・非表示
マーカーの表示・非表示
機能API
機能 API
http://help.infragistics.com/jQuery/2012.1/
トレンドラインの設定初期化時にあらかじめ設定
機能の設定例
// チャート設定$("#chart1").igDataChart({
dataSource: data,…series: [{
type: "line",name: "volumeSeries",brush: "rgba(255, 0, 0, 1)",title: "売上",xAxis: "xAxis",yAxis: "volumeAxis",valueMemberPath: "Volume",showTooltip: true,markerType: "square",trendLineThickness: 5,trendLineBrush: "rgba(0, 100, 0, 1)",trendLineType: "modifiedAverage",
}],…
});
ユーザーのアクションから設定を変更
機能の設定例 // チャートの設定を変更$("#chart1").igDataChart("option", "series", [{
name: "volumeSeries",trendLineType: "powerLawFit",
}]);
DEMOigChart 機能の設定と変更
5. igChart:データの更新
大量データをストレスなく表示表示後のユーザーインタラクションに対応データの更新にも対応
リアルタイムデータ表示
igChart の強み
メソッドAPI
メソッド API
http://help.infragistics.com/jQuery/2012.1/
1. データを作成し、チャートに更新されたことを通知
データの追加と通知
$('#add').live('click', function () {// 新規データ作成var newData ={
"DateString": "2.1.2010","Open": 1000, "High": 1028.75, "Low":
985.25,"Close": 1020, "Volume": 1950 +
Math.random() * 100};data.push(newData);// チャートに変更を通知$("#chart1").igDataChart("notifyInsertItem",
data, data.length - 1, newData);
});
DEMOigChart データの更新通知
6. まとめリソース
まとめ igChart 入門編igChart 概要Infragistics LoaderigChart データ バインディングigChart 機能設定とユーザー インタラクション
igChart データ更新
HTML5 HTML5 チート シート
http://www.inmotionhosting.com/infographics/html5-cheat-sheet/
ブラウザー 対応状況http://www.findmebyip.com/litmus/
jQuery jQuery
http://jquery.com/ jQuery UI
http://jqueryui.com/
NetAdvantage for jQuery 製品紹介
http://jp.infragistics.com オンライン サンプル
http://samples.jp.infragistics.com/ Blog
http://blogs.jp.infragistics.com/blogs/ オンライン API
http://help.infragistics.com/jQuery/2012.1/
リソース
