jQuery/HTML5 チャート:igChart 入門編セッションレベル : 200 – BasicDaizen Ikehara : Developer Evangelistdikehara@infragistics.comTwitter @...
アジェンダ1 / NetAdvantage for jQuery / igChart 概要2 / Infragistics Loader3 / igChart : データ バインディング4 / igChart : 機能設定とユーザー インタラク...
1.NetAdvantagefor jQueryigChart概要
NetAdvantage シリーズ                Web / RIA   ReportingWin / Rich                              MobileClient                ...
 高パフォーマンス                        HTML4 + 5Jquery UI                        豊富な高機能ベース コント                  UI ウィジェット    ...
igChart• パフォーマンス  HTML5  チャート• 多様な  チャートタイプ• モーション  フレームワーク  による動的変更• XAML 製品と  同等に近い  機能
igChart:HTML5, CSS3,対応状況               HTML5 マークアップ   CANVAS               HTML5 API      キャンバス API               CSS3 スタイ...
2.InfragisticsLoader
 jQuery / jQuery UI を利用する場合は               スクリプト ファイル、CSS ファイルの参照が必要JS ライブラリー利用時のリソース参照              NetAdvantage for jQ...
 Infragistics Loader を利用することで関連リソース                        の参照、読み込みを自動化Infragistics Loader   使用前                      使用後
 Infragistics Loader の初期化                      <script type="text/javascript">                          // igLoader の読み込み...
3.igChart:データバインディング
 サポートされる  データ ソース    igDataSource    IQueryable<T>     (ASP.NET MVC)                     // チャート設定                     ...
X軸                  Y軸          その他 軸の種類     categoryX           categoryY   X軸     numericX            numericY   Y軸  ...
// チャート設定軸               $("#chart1").igDataChart({    axes コレクション     dataSource: data,         type                  ...
bar          column        line チャート要素    area         spline        splineArea    シリーズ   waterfall    candlestick   pol...
 シリーズ   series コレクション      // チャート設定        type          $("#chart1").igDataChart({        xAxis             dataSour...
igChart データ表示DEMO
4.機能設定とユーザーインタラクション
 ビルトイン機能 主要機能   凡例          ナビゲーション   ツールチップ                     (拡大・縮小)         十字ポインター     マーカー      トレンドライン         ...
 機能 API 機能API     http://help.infragistics.com/jQuery/2012.1/
 トレンドラインの設定 機能の設定例       初期化時にあらかじめ設定           // チャート設定           $("#chart1").igDataChart({               dataSource...
 ユーザーのアクションから設定を変更 機能の設定例   // チャートの設定を変更           $("#chart1").igDataChart("option", "series", [{                name:...
igChart 機能の設定と変更DEMO
5.igChart:データの更新
 igChart の強み    大量データをストレスなく表示                 表示後のユーザー インタラクションに対応                 データの更新にも対応                    リアル...
 メソッド API メソッドAPI     http://help.infragistics.com/jQuery/2012.1/
1. データを作成し、チャートに               更新されたことを通知 データの追加と  通知            $(#add).live(click, function () {                // 新規デー...
igChart データの更新通知DEMO
6.まとめリソース
まとめ   igChart 入門編         igChart 概要         Infragistics Loader         igChart データ バインディング         igChart 機能設定と   ...
リソース    HTML5            HTML5 チート シート             http://www.inmotionhosting.com/infographi             cs/html5-cheat-...
IgChart 入門編
IgChart 入門編
Upcoming SlideShare
Loading in …5
×

IgChart 入門編

1,873 views
1,759 views

Published on

NetAdvantage for jQuery の HTML5 チャートコンポーネントである、igChart の入門編です。

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
1,873
On SlideShare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
4
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

IgChart 入門編

  1. 1. jQuery/HTML5 チャート:igChart 入門編セッションレベル : 200 – BasicDaizen Ikehara : Developer Evangelistdikehara@infragistics.comTwitter @Neri78
  2. 2. アジェンダ1 / NetAdvantage for jQuery / igChart 概要2 / Infragistics Loader3 / igChart : データ バインディング4 / igChart : 機能設定とユーザー インタラクション5 / igChart : イベントハンドリング6 / まとめ、リソース
  3. 3. 1.NetAdvantagefor jQueryigChart概要
  4. 4. NetAdvantage シリーズ Web / RIA ReportingWin / Rich MobileClient NetAdvantage
  5. 5.  高パフォーマンス  HTML4 + 5Jquery UI  豊富な高機能ベース コント UI ウィジェット  グリッドロール  チャート  ツリーjQuery / jQuery UI /  マップ (CTP)jQuery Mobile をベースに独自 UI, 機能  スタイル サポートを提供  ASP.NET MVC ラッパー提供  jQuery Mobile 対応 UI ウィジェット
  6. 6. igChart• パフォーマンス HTML5 チャート• 多様な チャートタイプ• モーション フレームワーク による動的変更• XAML 製品と 同等に近い 機能
  7. 7. igChart:HTML5, CSS3,対応状況 HTML5 マークアップ CANVAS HTML5 API キャンバス API CSS3 スタイリング/ なし アニメーション 旧ブラウザーでの制限 上記機能が利用できない 場合は動作せず
  8. 8. 2.InfragisticsLoader
  9. 9.  jQuery / jQuery UI を利用する場合は スクリプト ファイル、CSS ファイルの参照が必要JS ライブラリー利用時のリソース参照  NetAdvantage for jQuery の関連ファイルは膨大
  10. 10.  Infragistics Loader を利用することで関連リソース の参照、読み込みを自動化Infragistics Loader 使用前 使用後
  11. 11.  Infragistics Loader の初期化 <script type="text/javascript"> // igLoader の読み込みInfragistics Loader $.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> 呼び出しなどの処理
  12. 12. 3.igChart:データバインディング
  13. 13.  サポートされる データ ソース  igDataSource  IQueryable<T> (ASP.NET MVC) // チャート設定 $("#chart1").igDataChart({ dataSource: data, … });
  14. 14. X軸 Y軸 その他 軸の種類 categoryX categoryY X軸 numericX numericY Y軸 categoryDatetimeX  その他 categoryAngle numericRadius numericAngle  軸要件が合えば、複数軸を組み合わせることが可能
  15. 15. // チャート設定軸 $("#chart1").igDataChart({  axes コレクション dataSource: data,  type 軸の種類 axes: [  label { 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)" }], … });
  16. 16. bar column line チャート要素 area spline splineArea  シリーズ waterfall candlestick polarScatter polorarea radialline RadialColumn radialPie rangeArea rangeColumn bubble scatter scatterLine Ohlc  円チャートは igPieChart にて提供  複数シリーズを定義可能
  17. 17.  シリーズ  series コレクション // チャート設定  type $("#chart1").igDataChart({  xAxis dataSource: data,  yAxis …  valueMember シリーズの種類 Path series: [ { type: "line", name: "volumeSeries", brush: "rgba(255, 0, 0, 1)", title: "売上", markerType: "circle", xAxis: "xAxis", yAxis: "volumeAxis", valueMemberPath: "Volume", showTooltip: true }], }); チャートデータのパス
  18. 18. igChart データ表示DEMO
  19. 19. 4.機能設定とユーザーインタラクション
  20. 20.  ビルトイン機能 主要機能 凡例 ナビゲーション ツールチップ (拡大・縮小) 十字ポインター マーカー トレンドライン  ユーザー インタラクション シナリオ ズーム パンニング 表示エリア移動 ホバー 軸線の 軸主線、副線の 表示・非表示 表示・非表示 軸ストライプの 軸ラベルの データ シリーズの 表示・非表示 表示・非表示 表示・非表示 凡例の マーカーの 表示・非表示 表示・非表示
  21. 21.  機能 API 機能API http://help.infragistics.com/jQuery/2012.1/
  22. 22.  トレンドラインの設定 機能の設定例  初期化時にあらかじめ設定 // チャート設定 $("#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", }], … });
  23. 23.  ユーザーのアクションから設定を変更 機能の設定例 // チャートの設定を変更 $("#chart1").igDataChart("option", "series", [{ name: "volumeSeries", trendLineType: "powerLawFit", }]);
  24. 24. igChart 機能の設定と変更DEMO
  25. 25. 5.igChart:データの更新
  26. 26.  igChart の強み  大量データをストレスなく表示  表示後のユーザー インタラクションに対応  データの更新にも対応  リアルタイムデータ表示
  27. 27.  メソッド API メソッドAPI http://help.infragistics.com/jQuery/2012.1/
  28. 28. 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); });
  29. 29. igChart データの更新通知DEMO
  30. 30. 6.まとめリソース
  31. 31. まとめ igChart 入門編 igChart 概要 Infragistics Loader igChart データ バインディング igChart 機能設定と ユーザー インタラクション igChart データ更新
  32. 32. リソース  HTML5  HTML5 チート シート http://www.inmotionhosting.com/infographi cs/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/

×