SHOEISHA iD

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

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

JavaScriptライブラリ「Wijmo」のさまざまな部品を徹底活用(AD)

JavaScriptライブラリ「Wijmo」のさまざまな部品を徹底活用!~複数チャートをタブパネルで切り替え表示~

JavaScriptライブラリ「Wijmo」のさまざまな部品を徹底活用 第2回

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

タブパネルによる切り替え表示を実装(2)

index.htmlにおけるタブパネルの記述

 Webページのファイル(index.html)では、WijmoのCSSやJavaScriptファイルを参照して利用できるようにしていました。このうちWijmoのJavaScriptを参照する記述を、リスト1の通り修正します。

[リスト1]WijmoのJavaScriptを参照するHTMLの記述(p001-wijmo/index.html)
<script src="wijmo/controls/wijmo.min.js"></script>
<script src="wijmo/controls/cultures/wijmo.culture.ja.min.js"></script>
<script src="wijmo/controls/wijmo.chart.min.js"></script>
<script src="wijmo/controls/wijmo.grid.min.js"></script>
<script src="wijmo/controls/wijmo.nav.min.js"></script> <!-- 追加 -->

 リスト1で参照しているWijmoのJavaScriptファイルを表2に示します。No.5が今回追加したファイルです。タブパネルはwijmo.navモジュールに含まれるため、wijmo.nav.min.jsの参照を追加します。

表2 index.htmlから参照するWijmoのJavaScriptファイル(p001-wijmo/index.html)
No. ファイル名 役割
1 wijmo/controls/wijmo.min.js Wijmo本体
2 wijmo/controls/cultures/wijmo.culture.ja.min.js カルチャ(日本語)ファイル
3 wijmo/controls/wijmo.chart.min.js チャート(FlexChart)のファイル
4 wijmo/controls/wijmo.grid.min.js グリッド(FlexGrid)のファイル
5 wijmo/controls/wijmo.nav.min.js タブパネルなどナビゲーション部品のファイル

 次に、タブパネルを表示するようにindex.htmlのHTML記述を修正していきます。修正前は1個のFlexChartを表示していた箇所を、リスト2の通り変更します。

[リスト2]タブパネルを表示するHTMLの記述(p001-wijmo/index.html)
<div id="tab-panel"><!-- タブパネル ...(1)-->
    <div class="tab-wrapper"><!-- タブの1項目 ...(2)-->
        <a>気温</a><!-- タブの名称 ...(3)-->
        <div class="tab-page"><!-- タブの1ページ ...(4)-->
            <div id="chart1" class="chart"></div><!-- チャート1 -->
        </div>
    </div>
    <div class="tab-wrapper">
        <a>降水量</a>
        <div class="tab-page">
            <div id="chart2" class="chart"></div><!-- チャート2 -->
        </div>
    </div>
(略:チャート3~チャート5の記述)
</div>

 (1)の<div id="tab-panel">要素にタブパネルを表示します。この中には、タブの1項目に対応する(2)の<div class="tab-wrapper">要素を、タブの個数だけ記述します。この内側には(3)の<a>要素でタブの名称を、(4)の<div class="tab-page">要素でタブの1ページの内容を、それぞれ記述します。ここでは気温のほか、降水量、日照時間、風速、湿度のチャートを含んだ、計5個のタブを記述します。

index.jsにおけるタブパネルと各チャート描画の実装

 次にindex.jsで、タブパネルと、その中に表示する各要素を実装していきます。

 まず、リスト2の記述をタブパネルとして表示する処理はリスト3の通りです。IDが「tab-panel」の要素、つまりリスト2(1)の要素を表すCSSセレクター「#tab-panel」を指定してwijmo.nav.TabPanelのコンストラクターを実行すると、その要素がタブパネルとして表示されるようになります。

[リスト3]タブパネルを表示するJavaScriptの実装(p001-wijmo/index.js)
const tabPanel = new wijmo.nav.TabPanel('#tab-panel');

 今回タブパネルに表示するのは、項目別のチャートです。そこで、従来1つしかなかったチャートの処理を増やして、リスト4の通り5つのチャートを表示するようにします。

[リスト4]各タブのチャートを表示するJavaScriptの実装(p001-wijmo/index.js)
// 気温のチャート ...(1)
const chart1 = new wijmo.chart.FlexChart('#chart1', {
  header: '北海道',
  chartType: wijmo.chart.ChartType.Line, // ...(1a)
  axisX: {
    format: 'MM/dd'
  },
  bindingX: 'date',
  series: [ // ...(1b)
    { binding: 'maxTemperature', name: '最高気温' },
    { binding: 'minTemperature', name: '最低気温' }
  ],
  legend: { // ...(1c)
    orientation: wijmo.chart.Orientation.Horizontal,
    position: wijmo.chart.Position.Bottom
  }
});
// 降水量のチャート ...(2)
const chart2 = new wijmo.chart.FlexChart('#chart2', {
  header: '北海道',
  chartType: wijmo.chart.ChartType.Column, // ...(2a)
  axisX: {
    format: 'MM/dd'
  },
  bindingX: 'date',
  series: [ // ...(2b)
    { binding: 'precipitation', name: '降水量' }
  ],
  legend: { // ...(2c)
    orientation: wijmo.chart.Orientation.Horizontal,
    position: wijmo.chart.Position.Bottom
  }
});
(以下略 chart3:日照時間、chart4:風速、chart5:湿度)

 (1)が気温を表示する(従来の)チャート、(2)は今回追加した降水量のチャートを表示する処理です。以下類似の実装で、日照時間、風速、湿度の各チャートを表示する処理を記述していきます。

 チャートの種類は(1a)(2a)のchartType属性に指定します。今回はチャートごとに表3のchartTypeを指定しました。Wijmoで利用できるすべてのチャート種類は、公式のドキュメントや実際に動作を試せるデモサイトを参照してください。

表3 各チャートに指定するチャートの種類(p001-wijmo/index.js)
No. チャート chartType

チャートの種類

1 chart1(気温) wijmo.chart.ChartType.Line 折れ線
2 chart2(降水量) wijmo.chart.ChartType.Column 縦棒
3 chart3(日照時間) wijmo.chart.ChartType.Area 折れ線(線の下を塗りつぶして表示)
4 chart4(風速) wijmo.chart.ChartType.LineSymbols 折れ線(データ点にシンボルを表示)
5 chart5(湿度) wijmo.chart.ChartType.Spline 折れ線(曲線で表示)

 チャートに表示するデータは、各チャート(1b)(2b)のseries配列で指定します。データの項目名(表1参照)をbinding属性に、データの名前をname属性に指定します。また、(1c)(2c)のlegendは表の凡例に関する設定で、ここではorientation属性に凡例の方向をwijmo.chart.Orientation.Horizontal(=横並び)、position属性に凡例の表示位置をwijmo.chart.Position.Bottom(=チャートの下)と指定しています。凡例で指定できるすべてのパラメーターは、Wijmoの公式ドキュメントに記載されています。

次のページ
タブパネルによる切り替え表示を実装(3)

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

  • X ポスト
  • このエントリーをはてなブックマークに追加
JavaScriptライブラリ「Wijmo」のさまざまな部品を徹底活用連載記事一覧

もっと読む

この記事の著者

WINGSプロジェクト  吉川 英一(ヨシカワ エイイチ)

WINGSプロジェクトについて> 有限会社 WINGSプロジェクトが運営する、テクニカル執筆コミュニティ(代表 山田祥寛)。主にWeb開発分野の書籍/記事執筆、翻訳、講演等を幅広く手がける。2018年11月時点での登録メンバは55名で、現在も執筆メンバを募集中。興味のある方は、どしどし応募頂きたい。著書記事多数。 RSS Twitter: @yyamada(公式)、@yyamada/wings(メンバーリスト) Facebook

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

山田 祥寛(ヤマダ ヨシヒロ)

静岡県榛原町生まれ。一橋大学経済学部卒業後、NECにてシステム企画業務に携わるが、2003年4月に念願かなってフリーライターに転身。Microsoft MVP for Visual Studio and Development Technologies。執筆コミュニティ「WINGSプロジェクト」代表。主な著書に「独習シリーズ(Java・C#・Python・PHP・Ruby・JSP&サーブレットなど)」「速習シリーズ(ASP.NET Core・Vue.js・React・TypeScript・ECMAScript、Laravelなど)」「改訂3版JavaScript本格入門」「これからはじめるReact実践入門」「はじめてのAndroidアプリ開発 Kotlin編 」他、著書多数

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

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

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

この記事をシェア

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

おすすめ

アクセスランキング

アクセスランキング

イベント

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

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

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

メールバックナンバー

アクセスランキング

アクセスランキング