SHOEISHA iD

※旧SEメンバーシップ会員の方は、同じ登録情報(メールアドレス&パスワード)でログインいただけます

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

Infragistics NetAdvantageチュートリアル(AD)

HTML5対応チャートコンポーネントを利用したデータ視覚化入門 その2 - さまざまな機能を使って利用者にわかりやすくデータを提示しよう

  • X ポスト
  • このエントリーをはてなブックマークに追加

 前回は、HTML5、jQueryを利用し実現するigDataChartにデータを表示させました。今回は追加の機能を利用し、よりユーザーにとっての使い勝手やデータの視認性を高めるように設定しましょう。

  • X ポスト
  • このエントリーをはてなブックマークに追加

対象読者

 jQueryや最新のWeb技術に興味のある人。データ視覚化に興味のある人。

必要環境

 『jQueryで地震分布図を作成しよう』においても言及されているように、開発環境やプラットフォームには依存しません。コード編集用のエディタと動作確認用のブラウザのみを用意してください。ただし、今回利用するigDataChartコントロールは下記の機能を利用しています。対応していないブラウザでは正しく動作しません。

  • HTML5マークアップ:CANVAS
  • HTML5 API:キャンバス

 現在のような過渡期では、キャンバス機能が使えないブラウザではその旨を表示したり、別の表現方法に差し替えたりする方法を検討しましょう。

コンポーネントの取得

 はじめてIgnite UIを使用する場合は、事前にパッケージを取得する必要があります。Windowsインストーラー形式、あるいは必要ファイルのみがパッケージされた圧縮ファイルをインフラジスティックス社のWebページからダウンロードしてください(サイトへの登録が必要になります)。

 この製品は有償ですが、20日間すべての機能を試用できる無償トライアル版として利用が可能です。

 また、下記記事で紹介されているグリッドについては、商用利用可能な無料版が公開されています。

Ignite UIについて

 「Ignite UI」はjQuery、jQuery UI、jQuery MobileをベースとしたHTML5/CSS対応コントロールスイートです。原稿執筆時点での最新バージョンは2013 Volume1となっており、モバイルデバイス、デスクトップ対応のリッチWebアプリケーションを構築するためのコントロールを数多く提供しています。特定の開発環境に依存していませんが、Visual Studioを利用する場合は、ASP.NET MVCのRazor構文でUI部分(View)を構築できるようになっており、Entity Frameworkなど今までのWeb資産を有効に活用できます。このIgnite UIを含め、インフラジスティックス社のコントロールを使用したサンプルについては、オンラインサンプルで確認することができます。

igDataChartについて

 前述のとおり、HTML5のキャンバス機能を利用した高機能、高速チャートです。100万点もの大量データをストレスなく表示できることを目指して開発が行われました。また、今回利用するHTML5版だけにとどまらず、WPFSilverlightWindows UI(XAML、WinJS)iOSそれぞれのプラットフォームにおいて共通の機能セットを持ったコントロールとして提供されています。

チャートを財務チャートとして表示

 本題に入る前に、今回の記事は前回の記事のサンプルをスタート地点としていますが、jQueryおよびjQuery UIのバージョンアップを実施し、下記の部分が変更となっている点に注意してください。

コード例1 jQueryライブラリの更新
<!-- 必要なスクリプトファイルの読み込み -->
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>

 また、前回はチャートタイプをlineとして折れ線を表示していましたが、バインドしたデータは株価の情報なので、今回は財務チャートに変更したうえでインタラクション機能を利用します。財務チャートとして利用する場合、軸の設定以外に最低限下記のプロパティをシリーズオブジェクトに設定することになります。

表1 財務シリーズの設定値
プロパティ名 説明 設定値
type 財務チャートを表すシリーズタイプ financial
opemnMemberPath 始値を表すデータへのバインド Start
lowMemberPath 安値を表すデータへのバインド Low
highMemberPath 高値を表すデータへのバインド High
closeMemberPath 終値を表すデータへのバインド End
コード例2 ローソク足チャートを表示するコード
$("#igDataChart1").igDataChart({
    // … 省略

    // シリーズの設定
    series: 
    [
        {
            name: "stockSeries",
            type: "financial",
            xAxis: "axisX",
            yAxis: "axisY",
            openMemberPath: "Start",
            lowMemberPath: "Low",
            highMemberPath: "High",
            closeMemberPath: "End",
            title: "株価"
        } 
});

 ページを開くと、ローソク足チャートが表示されました。

図1 ローソク足チャート
図1 - ローソク足チャート

次のページ
トレンドラインの追加

この記事は参考になりましたか?

  • X ポスト
  • このエントリーをはてなブックマークに追加
Infragistics NetAdvantageチュートリアル連載記事一覧

もっと読む

この記事の著者

インフラジスティックス・ジャパン株式会社 池原 大然(イケハラ ダイゼン)

国内ベンチャー企業にて.NETエンジニアとして開発に従事、2007年インフラジスティックス・ジャパンに入社。現在デベロッパー エバンジェリストとして、.NETやWPF/Silverlight製品や技術の啓蒙活動を行う。Microsoft MVP for Client App Dev 2010/04 ...

※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です

【AD】本記事の内容は記事掲載開始時点のものです 企画・制作 株式会社翔泳社

この記事は参考になりましたか?

この記事をシェア

  • X ポスト
  • このエントリーをはてなブックマークに追加
CodeZine(コードジン)
https://codezine.jp/article/detail/7361 2013/09/05 14:00

おすすめ

アクセスランキング

アクセスランキング

イベント

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

新規会員登録無料のご案内

  • ・全ての過去記事が閲覧できます
  • ・会員限定メルマガを受信できます

メールバックナンバー

アクセスランキング

アクセスランキング