CodeZine(コードジン)

特集ページ一覧

さまざまなグラフを帳票に表示できる「ActiveReportsJS」のチャート機能

「ActiveReportsJS」ではじめるフロントエンド帳票開発 第4回

  • ブックマーク
  • LINEで送る
  • このエントリーをはてなブックマークに追加
目次

より実用的なグラフへ発展させる

 以下では、図1のグラフをもとに、より情報量の多い実用的なグラフを表示する方法を説明します。

複数のデータを棒グラフで並べて表示

 図1では、A社の販売台数のみを表示させていましたが、B社/C社のデータも並べて表示するようにしてみます(図8)。

図8 A社/B社/C社の販売台数を表示する棒グラフ(p002-bar-multi)
図8 A社/B社/C社の販売台数を表示する棒グラフ(p002-bar-multi)

 図8の通り表示するには、プロット1の「値」を2つ追加して、B社、C社の販売台数に対応する「B社」「C社」をそれぞれ設定します。

図9 B社/C社の販売台数をプロットに追加(p002-bar-multi/002-bar-multi.rdlx-json)
図9 B社/C社の販売台数をプロットに追加(p002-bar-multi/002-bar-multi.rdlx-json)

 データが複数種類になったため、それぞれを区別できる凡例を表示させます。プロットの「エンコーディング」-「凡例に値の名前を表示」を設定すると、凡例が表示されるようになります。

図10 凡例を表示させる設定(p002-bar-multi/002-bar-multi.rdlx-json)
図10 凡例を表示させる設定(p002-bar-multi/002-bar-multi.rdlx-json)

 追加された凡例を選択して、プロパティの「向き」や「位置」などで表示を調整します。ここでは向きを「Horizontal」にして並びを水平方向にし、位置を「Top」にしてグラフの上に表示するようにします。

図11 凡例の向きと位置を設定(p002-bar-multi/002-bar-multi.rdlx-json)
図11 凡例の向きと位置を設定(p002-bar-multi/002-bar-multi.rdlx-json)

棒グラフに折れ線グラフを重ねて表示

 異なる種類のグラフを重ねて表示させることもできます。ここでは販売台数の棒グラフの上に、売上額の折れ線グラフを表示させてみます(図12)。

図12 棒グラフに折れ線グラフを重ねて表示(p003-bar-line)
図12 棒グラフに折れ線グラフを重ねて表示(p003-bar-line)

 異なる種類のグラフを表示するには、チャートを選択して、「プロット」を追加します。最初のプロット(プロット1)と同じ手順で、追加したプロット(プロット2)の「値」には「売上額」、「カテゴリ」には「月」をそれぞれ設定し、「エンコーディング」-「凡例に値の名前を表示」を設定します。

図13 チャートにプロットを追加(p003-bar-line/p003-bar-line.rdlx-json)
図13 チャートにプロットを追加(p003-bar-line/p003-bar-line.rdlx-json)

 次に、追加したプロットのグラフ種類を折れ線グラフに変更します。「プロット2」を選択した状態で、帳票デザイナ上部(リボン部分)に表示される「Chart」メニューから「プロットのテンプレートの設定」をクリックすると、設定できるグラフの種類が表示されるので、折れ線グラフを選択します。

図14 追加したプロットを折れ線グラフに設定(p003-bar-line/p003-bar-line.rdlx-json)
図14 追加したプロットを折れ線グラフに設定(p003-bar-line/p003-bar-line.rdlx-json)

 X軸とY軸の表示を調整します。X軸は棒グラフと折れ線グラフで共通なので、プロット1のX軸を選択して、プロパティの「プロット」に「プロット2」を追加します。この設定により、棒グラフと折れ線グラフで共通のX軸が表示されるようになります。

図15 X軸の設定変更(p003-bar-line/p003-bar-line.rdlx-json)
図15 X軸の設定変更(p003-bar-line/p003-bar-line.rdlx-json)

 プロット2のY軸を右側に移動します。プロット2のY軸を選択して、プロパティの「レイアウト」-「位置」を「Near」から「Far」に変更します。NearはY軸なら左/X軸なら下、「Far」はY軸なら右/X軸なら上に軸を表示する設定です。「None」にすると軸自体が表示されなくなります。

図16 プロット2のY軸を右側に表示する設定(p003-bar-line/p003-bar-line.rdlx-json)
図16 プロット2のY軸を右側に表示する設定(p003-bar-line/p003-bar-line.rdlx-json)

 また、プロット2のY軸に対して「スケール」の最小値と最大値を設定し、「ラベル」の表示形式は「通貨」にします。

図17 プロット2のY軸にスケールとラベルを設定(p003-bar-line/p003-bar-line.rdlx-json)
図17 プロット2のY軸にスケールとラベルを設定(p003-bar-line/p003-bar-line.rdlx-json)

関連リンク

  • ブックマーク
  • LINEで送る
  • このエントリーをはてなブックマークに追加

あなたにオススメ

著者プロフィール

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

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

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

    静岡県榛原町生まれ。一橋大学経済学部卒業後、NECにてシステム企画業務に携わるが、2003年4月に念願かなってフリーライターに転身。Microsoft MVP for ASP/ASP.NET。執筆コミュニティ「WINGSプロジェクト」代表。 主な著書に「入門シリーズ(サーバサイドAjax/XM...

バックナンバー

連載:「ActiveReportsJS」ではじめるフロントエンド帳票開発
All contents copyright © 2005-2021 Shoeisha Co., Ltd. All rights reserved. ver.1.5